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

added format command and added trailing commas to reduce conflicts

Browse Source
This commit is contained in:
dswbx
2025-02-26 20:06:03 +01:00
parent 88b5359f1c
commit 7743f71a11
414 changed files with 3622 additions and 3610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/ui/components/form/FloatingSelect/FloatingSelect.tsx
View File

@@ -23,7 +23,7 @@ export function FloatingSelect({ data, label, description }: FloatingSelectProps
key={item}
className={twMerge(
"transition-colors duration-100 px-2.5 py-2 leading-none rounded-lg text-md",
active === index && "text-white"
active === index && "text-white",
)}
ref={setControlRef(index)}
onClick={() => setActive(index)}

2
app/src/ui/components/form/Formy/BooleanInputMantine.tsx
View File

@@ -26,5 +26,5 @@ export const BooleanInputMantine = forwardRef<HTMLInputElement, React.ComponentP
/>
</div>
);
}
},
);

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

@@ -10,7 +10,7 @@ import {
useEffect,
useImperativeHandle,
useRef,
useState
useState,
} from "react";
import { TbCalendar, TbChevronDown, TbInfoCircle } from "react-icons/tb";
import { twMerge } from "tailwind-merge";
@@ -32,7 +32,7 @@ export const Group = <E extends ElementType = "div">({
as === "fieldset" && "border border-primary/10 p-3 rounded-md",
as === "fieldset" && error && "border-red-500",
error && "text-red-500",
props.className
props.className,
)}
/>
);
@@ -93,7 +93,7 @@ export const Input = forwardRef<HTMLInputElement, React.ComponentProps<"input">>
disabledOrReadonly && "bg-muted/50 text-primary/50",
!disabledOrReadonly &&
"focus:bg-muted focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all",
props.className
props.className,
)}
/>
);
@@ -108,11 +108,11 @@ export const Textarea = forwardRef<HTMLTextAreaElement, React.ComponentProps<"te
ref={ref}
className={twMerge(
"bg-muted/40 min-h-11 rounded-md py-2.5 px-4 focus:bg-muted outline-none focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all disabled:bg-muted/50 disabled:text-primary/50",
props.className
props.className,
)}
/>
);
}
},
);
export const DateInput = forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
@@ -145,7 +145,7 @@ export const DateInput = forwardRef<HTMLInputElement, React.ComponentProps<"inpu
/>
</div>
);
}
},
);
export const BooleanInput = forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
@@ -174,23 +174,23 @@ export const BooleanInput = forwardRef<HTMLInputElement, React.ComponentProps<"i
/>
</div>
);
}
},
);
export type SwitchValue = boolean | 1 | 0 | "true" | "false" | "on" | "off";
const SwitchSizes = {
xs: {
root: "h-5 w-8",
thumb: "data-[state=checked]:left-[calc(100%-1rem)]"
thumb: "data-[state=checked]:left-[calc(100%-1rem)]",
},
sm: {
root: "h-6 w-10",
thumb: "data-[state=checked]:left-[calc(100%-1.25rem)]"
thumb: "data-[state=checked]:left-[calc(100%-1.25rem)]",
},
md: {
root: "h-7 w-12",
thumb: "data-[state=checked]:left-[calc(100%-1.5rem)]"
}
thumb: "data-[state=checked]:left-[calc(100%-1.5rem)]",
},
};
export const Switch = forwardRef<
@@ -210,7 +210,7 @@ export const Switch = forwardRef<
className={clsx(
"relative cursor-pointer rounded-full bg-muted border-2 border-transparent outline-none ring-1 dark:ring-primary/10 ring-primary/20 data-[state=checked]:ring-primary/60 data-[state=checked]:bg-primary/60 appearance-none transition-colors hover:bg-muted/80",
SwitchSizes[props.size ?? "md"].root,
props.disabled && "opacity-50 !cursor-not-allowed"
props.disabled && "opacity-50 !cursor-not-allowed",
)}
onCheckedChange={(bool) => {
console.log("setting", bool);
@@ -229,7 +229,7 @@ export const Switch = forwardRef<
<RadixSwitch.Thumb
className={clsx(
"absolute top-0 left-0 h-full aspect-square rounded-full bg-primary/30 data-[state=checked]:bg-background transition-[left,right] duration-100 border border-muted",
SwitchSizes[props.size ?? "md"].thumb
SwitchSizes[props.size ?? "md"].thumb,
)}
/>
</RadixSwitch.Root>
@@ -250,7 +250,7 @@ export const Select = forwardRef<
"bg-muted/40 focus:bg-muted rounded-md py-2.5 px-4 outline-none focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all disabled:bg-muted/50 disabled:text-primary/50",
"appearance-none h-11 w-full",
!props.multiple && "border-r-8 border-r-transparent",
props.className
props.className,
)}
>
{options ? (

2
app/src/ui/components/form/SegmentedControl.tsx
View File

@@ -1,7 +1,7 @@
import {
Input,
SegmentedControl as MantineSegmentedControl,
type SegmentedControlProps as MantineSegmentedControlProps
type SegmentedControlProps as MantineSegmentedControlProps,
} from "@mantine/core";
type SegmentedControlProps = MantineSegmentedControlProps & {

6
app/src/ui/components/form/hook-form-mantine/MantineNumberInput.tsx
View File

@@ -1,6 +1,6 @@
import {
NumberInput as $NumberInput,
type NumberInputProps as $NumberInputProps
type NumberInputProps as $NumberInputProps,
} from "@mantine/core";
import { type FieldValues, type UseControllerProps, useController } from "react-hook-form";
@@ -18,13 +18,13 @@ export function MantineNumberInput<T extends FieldValues>({
}: MantineNumberInputProps<T>) {
const {
field: { value, onChange: fieldOnChange, ...field },
fieldState
fieldState,
} = useController<T>({
name,
control,
defaultValue,
rules,
shouldUnregister
shouldUnregister,
});
return (

10
app/src/ui/components/form/hook-form-mantine/MantineRadio.tsx
View File

@@ -2,7 +2,7 @@ import {
Radio as $Radio,
RadioGroup as $RadioGroup,
type RadioGroupProps as $RadioGroupProps,
type RadioProps as $RadioProps
type RadioProps as $RadioProps,
} from "@mantine/core";
import { type FieldValues, type UseControllerProps, useController } from "react-hook-form";
@@ -19,13 +19,13 @@ export function MantineRadio<T extends FieldValues>({
...props
}: RadioProps<T>) {
const {
field: { value, onChange: fieldOnChange, ...field }
field: { value, onChange: fieldOnChange, ...field },
} = useController<T>({
name,
control,
defaultValue,
rules,
shouldUnregister
shouldUnregister,
});
return (
@@ -55,13 +55,13 @@ function RadioGroup<T extends FieldValues>({
}: RadioGroupProps<T>) {
const {
field: { value, onChange: fieldOnChange, ...field },
fieldState
fieldState,
} = useController<T>({
name,
control,
defaultValue,
rules,
shouldUnregister
shouldUnregister,
});
return (

6
app/src/ui/components/form/hook-form-mantine/MantineSegmentedControl.tsx
View File

@@ -1,7 +1,7 @@
import {
SegmentedControl as $SegmentedControl,
type SegmentedControlProps as $SegmentedControlProps,
Input
Input,
} from "@mantine/core";
import { type FieldValues, type UseControllerProps, useController } from "react-hook-form";
@@ -26,13 +26,13 @@ export function MantineSegmentedControl<T extends FieldValues>({
...props
}: MantineSegmentedControlProps<T>) {
const {
field: { value, onChange: fieldOnChange, ...field }
field: { value, onChange: fieldOnChange, ...field },
} = useController<T>({
name,
control,
defaultValue,
rules,
shouldUnregister
shouldUnregister,
});
return (

8
app/src/ui/components/form/hook-form-mantine/MantineSelect.tsx
View File

@@ -16,13 +16,13 @@ export function MantineSelect<T extends FieldValues>({
}: MantineSelectProps<T>) {
const {
field: { value, onChange: fieldOnChange, ...field },
fieldState
fieldState,
} = useController<T>({
name,
control,
defaultValue,
rules,
shouldUnregister
shouldUnregister,
});
return (
@@ -34,8 +34,8 @@ export function MantineSelect<T extends FieldValues>({
...new Event("change", { bubbles: true, cancelable: true }),
target: {
value: e,
name: field.name
}
name: field.name,
},
});
// @ts-ignore
onChange?.(e);

4
app/src/ui/components/form/hook-form-mantine/MantineSwitch.tsx
View File

@@ -15,13 +15,13 @@ export function MantineSwitch<T extends FieldValues>({
}: SwitchProps<T>) {
const {
field: { value, onChange: fieldOnChange, ...field },
fieldState
fieldState,
} = useController<T>({
name,
control,
defaultValue,
rules,
shouldUnregister
shouldUnregister,
});
return (

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

@@ -39,7 +39,7 @@ const Root = ({ path = "", children }: AnyOfFieldRootProps) => {
lib,
pointer,
value: { matchedIndex, schemas },
schema
schema,
} = useDerivedFieldContext(path, (ctx) => {
const [matchedIndex, schemas = []] = getMultiSchemaMatched(ctx.schema, ctx.value);
return { matchedIndex, schemas };
@@ -58,7 +58,7 @@ const Root = ({ path = "", children }: AnyOfFieldRootProps) => {
const options = schemas.map((s, i) => s.title ?? `Option ${i + 1}`);
const selectSchema = {
type: "string",
enum: options
enum: options,
} satisfies JsonSchema;
const selectedSchema = selected !== null ? (schemas[selected] as JsonSchema) : undefined;
@@ -69,7 +69,7 @@ const Root = ({ path = "", children }: AnyOfFieldRootProps) => {
selectedSchema,
schema,
schemas,
selected
selected,
};
}, [selected]);
@@ -80,7 +80,7 @@ const Root = ({ path = "", children }: AnyOfFieldRootProps) => {
...context,
select,
path,
errors
errors,
}}
>
{children}
@@ -130,7 +130,7 @@ export const AnyOf = {
Root,
Select,
Field,
useContext: useAnyOfContext
useContext: useAnyOfContext,
};
export const AnyOfField = (props: Omit<AnyOfFieldRootProps, "children">) => {

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

@@ -72,7 +72,7 @@ const ArrayItem = memo(({ path, index, schema }: any) => {
const DeleteButton = useMemo(
() => <IconButton Icon={IconTrash} onClick={() => handleDelete(itemPath)} size="sm" />,
[itemPath]
[itemPath],
);
return (
@@ -95,7 +95,7 @@ const ArrayIterator = memo(
({ name, children }: any) => {
return children(useFormValue(name));
},
(prev, next) => prev.value?.length === next.value?.length
(prev, next) => prev.value?.length === next.value?.length,
);
const ArrayAdd = ({ schema, path }: { schema: JsonSchema; path: string }) => {
@@ -117,11 +117,11 @@ const ArrayAdd = ({ schema, path }: { schema: JsonSchema; path: string }) => {
return (
<Dropdown
dropdownWrapperProps={{
className: "min-w-0"
className: "min-w-0",
}}
items={itemsMultiSchema.map((s, i) => ({
label: s!.title ?? `Option ${i + 1}`,
onClick: () => handleAdd(ctx.lib.getTemplate(undefined, s!))
onClick: () => handleAdd(ctx.lib.getTemplate(undefined, s!)),
}))}
onClickItem={console.log}
>

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

@@ -92,7 +92,9 @@ export const FieldComponent = ({
// allow override
value: typeof _props.value !== "undefined" ? _props.value : value,
placeholder:
(_props.placeholder ?? typeof schema.default !== "undefined") ? String(schema.default) : ""
(_props.placeholder ?? typeof schema.default !== "undefined")
? String(schema.default)
: "",
};
if (schema.enum) {
@@ -103,7 +105,7 @@ export const FieldComponent = ({
const additional = {
min: schema.minimum,
max: schema.maximum,
step: schema.multipleOf
step: schema.multipleOf,
};
return (
@@ -133,7 +135,7 @@ export const FieldComponent = ({
const date = new Date(e.target.value);
props.onChange?.({
// @ts-ignore
target: { value: date.toISOString() }
target: { value: date.toISOString() },
});
}}
/>
@@ -147,7 +149,7 @@ export const FieldComponent = ({
const additional = {
maxLength: schema.maxLength,
minLength: schema.minLength,
pattern: schema.pattern
pattern: schema.pattern,
} as any;
if (schema.format) {

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

@@ -7,7 +7,7 @@ import * as Formy from "ui/components/form/Formy";
import {
useFormContext,
useFormError,
useFormValue
useFormValue,
} from "ui/components/form/json-schema-form/Form";
import { Popover } from "ui/components/overlay/Popover";
import { getLabel } from "./utils";
@@ -79,7 +79,7 @@ export function FieldWrapper({
{Children.count(children) === 1 && isValidElement(children)
? cloneElement(children, {
// @ts-ignore
list: examples.length > 0 ? examplesId : undefined
list: examples.length > 0 ? examplesId : undefined,
})
: children}
{examples.length > 0 && (
@@ -100,7 +100,7 @@ export function FieldWrapper({
const FieldDebug = ({
name,
schema,
required
required,
}: Pick<FieldwrapperProps, "name" | "schema" | "required">) => {
const { options } = useFormContext();
if (!options?.debug) return null;
@@ -111,7 +111,7 @@ const FieldDebug = ({
<div className="absolute top-0 right-0">
<Popover
overlayProps={{
className: "max-w-none"
className: "max-w-none",
}}
position="bottom-end"
target={({ toggle }) => (
@@ -122,7 +122,7 @@ const FieldDebug = ({
value,
required,
schema,
errors
errors,
}}
expand={6}
/>

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

@@ -4,7 +4,7 @@ import {
getDefaultStore,
useAtom,
useAtomValue,
useSetAtom
useSetAtom,
} from "jotai";
import { selectAtom } from "jotai/utils";
import { Draft2019, type JsonError, type JsonSchema as LibJsonSchema } from "json-schema-library";
@@ -20,7 +20,7 @@ import {
useContext,
useEffect,
useMemo,
useRef
useRef,
} from "react";
import { JsonViewer } from "ui/components/code/JsonViewer";
import { useEvent } from "ui/hooks/use-event";
@@ -32,7 +32,7 @@ import {
omitSchema,
pathToPointer,
prefixPath,
prefixPointer
prefixPointer,
} from "./utils";
export type JSONSchema = Exclude<$JSONSchema, boolean>;
@@ -67,7 +67,7 @@ FormContext.displayName = "FormContext";
export function Form<
const Schema extends JSONSchema,
const Data = Schema extends JSONSchema ? FromSchema<Schema> : any
const Data = Schema extends JSONSchema ? FromSchema<Schema> : any,
>({
schema: _schema,
initialValues: _initialValues,
@@ -101,7 +101,7 @@ export function Form<
dirty: false,
submitting: false,
errors: [] as JsonError[],
data: initialValues
data: initialValues,
});
}, [initialValues]);
const setFormState = useSetAtom(_formStateAtom);
@@ -188,9 +188,9 @@ export function Form<
lib,
options,
root: "",
path: ""
path: "",
}),
[schema, initialValues]
[schema, initialValues],
) as any;
return (
@@ -236,7 +236,7 @@ export function FormContextOverride({
const context = {
...ctx,
...overrides,
...additional
...additional,
};
console.log("context", context);
@@ -256,12 +256,12 @@ export function useFormValue(name: string, opts?: { strict?: boolean }) {
const pointer = pathToPointer(prefixedName);
return {
value: getPath(state.data, prefixedName),
errors: state.errors.filter((error) => error.data.pointer.startsWith(pointer))
errors: state.errors.filter((error) => error.data.pointer.startsWith(pointer)),
};
},
[name]
[name],
),
isEqual
isEqual,
);
return useAtom(selected)[0];
}
@@ -280,16 +280,16 @@ export function useFormError(name: string, opt?: { strict?: boolean; debug?: boo
: error.data.pointer.startsWith(pointer);
});
},
[name]
[name],
),
isEqual
isEqual,
);
return useAtom(selected)[0];
}
export function useFormStateSelector<Data = any, Reduced = Data>(
selector: (state: FormState<Data>) => Reduced,
deps: any[] = []
deps: any[] = [],
): Reduced {
const { _formStateAtom } = useFormContext();
const selected = selectAtom(_formStateAtom, useCallback(selector, deps), isEqual);
@@ -309,7 +309,7 @@ export function useDerivedFieldContext<Data = any, Reduced = undefined>(
},
Reduced
>,
_schema?: JSONSchema
_schema?: JSONSchema,
): FormContext<Data> & {
value: Reduced;
pointer: string;
@@ -338,29 +338,29 @@ export function useDerivedFieldContext<Data = any, Reduced = undefined>(
root,
schema: fieldSchema as LibJsonSchema,
pointer,
required
required,
};
const derived = deriveFn?.({ ...context, _formStateAtom, lib, value });
return {
...context,
value: derived
value: derived,
};
},
[path, schema ?? {}, root]
[path, schema ?? {}, root],
),
isEqual
isEqual,
);
return {
...useAtomValue(selected),
_formStateAtom,
lib
lib,
} as any;
}
export function Subscribe<Data = any, Refined = Data>({
children,
selector
selector,
}: {
children: (state: Refined) => ReactNode;
selector?: SelectorFn<FormState<Data>, Refined>;

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

@@ -102,7 +102,7 @@ export function getMultiSchema(schema: JsonSchema): JsonSchema[] | undefined {
export function getMultiSchemaMatched(
schema: JsonSchema,
data: any
data: any,
): [number, JsonSchema[], JsonSchema | undefined] {
const multiSchema = getMultiSchema(schema);
//console.log("getMultiSchemaMatched", schema, data, multiSchema);
@@ -124,7 +124,7 @@ export function omitSchema<Given extends JSONSchema>(_schema: Given, keys: strin
const updated = {
...schema,
properties: omitKeys(schema.properties, keys)
properties: omitKeys(schema.properties, keys),
};
if (updated.required) {
updated.required = updated.required.filter((key) => !keys.includes(key as any));

20
app/src/ui/components/form/json-schema/JsonSchemaForm.tsx
View File

@@ -40,7 +40,7 @@ export const JsonSchemaForm = forwardRef<JsonSchemaFormRef, JsonSchemaFormProps>
cleanOnChange,
...props
},
ref
ref,
) => {
const formRef = useRef<Form<any, RJSFSchema, any>>(null);
const id = useId();
@@ -67,32 +67,32 @@ export const JsonSchemaForm = forwardRef<JsonSchemaFormRef, JsonSchemaFormProps>
formData: () => value,
validateForm: () => formRef.current!.validateForm(),
silentValidate: () => isValid(value),
cancel: () => formRef.current!.reset()
cancel: () => formRef.current!.reset(),
}),
[value]
[value],
);
const _uiSchema: UiSchema = {
...uiSchema,
"ui:globalOptions": {
...uiSchema?.["ui:globalOptions"],
enableMarkdownInDescription: true
enableMarkdownInDescription: true,
},
"ui:submitButtonOptions": {
norender: true
}
norender: true,
},
};
const _fields: any = {
...Fields,
...fields
...fields,
};
const _templates: any = {
...Templates,
...templates
...templates,
};
const _widgets: any = {
...Widgets,
...widgets
...widgets,
};
//console.log("schema", schema, removeTitleFromSchema(schema));
@@ -115,7 +115,7 @@ export const JsonSchemaForm = forwardRef<JsonSchemaFormRef, JsonSchemaFormProps>
validator={validator as any}
/>
);
}
},
);
function removeTitleFromSchema(schema: any): any {
// Create a deep copy of the schema using lodash

12
app/src/ui/components/form/json-schema/JsonSchemaValidator.ts
View File

@@ -9,7 +9,7 @@ import type {
StrictRJSFSchema,
UiSchema,
ValidationData,
ValidatorType
ValidatorType,
} from "@rjsf/utils";
import { toErrorSchema } from "@rjsf/utils";
import { get } from "lodash-es";
@@ -49,7 +49,7 @@ const validate = true;
export class JsonSchemaValidator<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
F extends FormContextType = any,
> implements ValidatorType
{
// @ts-ignore
@@ -69,7 +69,7 @@ export class JsonSchemaValidator<
schema: S,
customValidate?: CustomValidator,
transformErrors?: ErrorTransformer,
uiSchema?: UiSchema
uiSchema?: UiSchema,
): ValidationData<T> {
if (!validate) return { errors: [], errorSchema: {} as any };
@@ -80,7 +80,7 @@ export class JsonSchemaValidator<
schema,
customValidate,
transformErrors,
uiSchema
uiSchema,
);
const { errors } = this.rawValidation(schema, formData);
debug && console.log("errors", { errors });
@@ -97,14 +97,14 @@ export class JsonSchemaValidator<
message: errorText,
property: "." + error.instanceLocation.replace(/^#\/?/, "").split("/").join("."),
schemaPath: error.keywordLocation,
stack: error.error
stack: error.error,
};
});
debug && console.log("transformed", transformedErrors);
return {
errors: transformedErrors,
errorSchema: toErrorSchema(transformedErrors)
errorSchema: toErrorSchema(transformedErrors),
} as any;
}

30
app/src/ui/components/form/json-schema/fields/MultiSchemaField.tsx
View File

@@ -12,7 +12,7 @@ import {
getDiscriminatorFieldFromSchema,
getUiOptions,
getWidget,
mergeSchemas
mergeSchemas,
} from "@rjsf/utils";
import { get, isEmpty, omit } from "lodash-es";
import { Component } from "react";
@@ -35,7 +35,7 @@ type AnyOfFieldState<S extends StrictRJSFSchema = RJSFSchema> = {
class MultiSchemaField<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
F extends FormContextType = any,
> extends Component<FieldProps<T, S, F>, AnyOfFieldState<S>> {
/** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
*
@@ -47,7 +47,7 @@ class MultiSchemaField<
const {
formData,
options,
registry: { schemaUtils }
registry: { schemaUtils },
} = this.props;
// cache the retrieved options in state in case they have $refs to save doing it later
//console.log("multi schema", { formData, options, props });
@@ -55,7 +55,7 @@ class MultiSchemaField<
this.state = {
retrievedOptions,
selectedOption: this.getMatchingOption(0, formData, retrievedOptions)
selectedOption: this.getMatchingOption(0, formData, retrievedOptions),
};
}
@@ -67,18 +67,18 @@ class MultiSchemaField<
*/
override componentDidUpdate(
prevProps: Readonly<FieldProps<T, S, F>>,
prevState: Readonly<AnyOfFieldState>
prevState: Readonly<AnyOfFieldState>,
) {
const { formData, options, idSchema } = this.props;
const { selectedOption } = this.state;
let newState = this.state;
if (!deepEquals(prevProps.options, options)) {
const {
registry: { schemaUtils }
registry: { schemaUtils },
} = this.props;
// re-cache the retrieved options in state in case they have $refs to save doing it later
const retrievedOptions = options.map((opt: S) =>
schemaUtils.retrieveSchema(opt, formData)
schemaUtils.retrieveSchema(opt, formData),
);
newState = { selectedOption, retrievedOptions };
}
@@ -104,7 +104,7 @@ class MultiSchemaField<
getMatchingOption(selectedOption: number, formData: T | undefined, options: S[]) {
const {
schema,
registry: { schemaUtils }
registry: { schemaUtils },
} = this.props;
const discriminator = getDiscriminatorFieldFromSchema<S>(schema);
@@ -112,7 +112,7 @@ class MultiSchemaField<
formData,
options,
selectedOption,
discriminator
discriminator,
);
return option;
}
@@ -143,7 +143,7 @@ class MultiSchemaField<
newFormData = schemaUtils.getDefaultFormState(
newOption,
newFormData,
"excludeObjectChildren"
"excludeObjectChildren",
) as T;
}
onChange(newFormData, undefined, this.getFieldId());
@@ -169,7 +169,7 @@ class MultiSchemaField<
registry,
schema,
uiSchema,
readonly
readonly,
} = this.props;
const { widgets, fields, translateString, globalUiOptions, schemaUtils } = registry;
@@ -241,7 +241,7 @@ class MultiSchemaField<
return {
label:
uiTitle || translateString(translateEnum, translateParams.concat(String(index + 1))),
value: index
value: index,
};
});
@@ -255,8 +255,8 @@ class MultiSchemaField<
...optionUiSchema,
"ui:options": {
...optionUiSchema?.["ui:options"],
hideLabel: true
}
hideLabel: true,
},
}}
/>
);
@@ -265,7 +265,7 @@ class MultiSchemaField<
<div
className={twMerge(
"panel multischema flex",
flexDirection === "row" ? "flex-row gap-3" : "flex-col gap-2"
flexDirection === "row" ? "flex-row gap-3" : "flex-col gap-2",
)}
>
<div className="flex flex-row gap-2 items-center panel-select">

2
app/src/ui/components/form/json-schema/fields/index.ts
View File

@@ -6,5 +6,5 @@ export const fields = {
AnyOfField: MultiSchemaField,
OneOfField: MultiSchemaField,
JsonField,
LiquidJsField
LiquidJsField,
};

4
app/src/ui/components/form/json-schema/index.tsx
View File

@@ -5,8 +5,8 @@ export type { JsonSchemaFormProps, JsonSchemaFormRef };
const Module = lazy(() =>
import("./JsonSchemaForm").then((m) => ({
default: m.JsonSchemaForm
}))
default: m.JsonSchemaForm,
})),
);
export const JsonSchemaForm = forwardRef<JsonSchemaFormRef, JsonSchemaFormProps>((props, ref) => {

479
app/src/ui/components/form/json-schema/styles.css
View File

@@ -1,264 +1,265 @@
*,
*::before,
*::after {
box-sizing: border-box;
box-sizing: border-box;
}
.json-form {
@apply flex flex-col flex-grow;
@apply flex flex-col flex-grow;
/* dirty fix preventing the first fieldset to wrap */
&.mute-root {
& > div > div > div > fieldset:first-child {
@apply border-none p-0;
}
}
/* dirty fix preventing the first fieldset to wrap */
&.mute-root {
& > div > div > div > fieldset:first-child {
@apply border-none p-0;
}
}
&:not(.fieldset-alternative) {
fieldset {
@apply flex flex-grow flex-col gap-3.5 border border-solid border-muted p-3 rounded;
&:not(.fieldset-alternative) {
fieldset {
@apply flex flex-grow flex-col gap-3.5 border border-solid border-muted p-3 rounded;
.title-field {
@apply bg-primary/10 px-3 text-sm font-medium py-1 rounded-full;
align-self: flex-start;
.title-field {
@apply bg-primary/10 px-3 text-sm font-medium py-1 rounded-full;
align-self: flex-start;
}
}
}
/* alternative */
&.fieldset-alternative {
fieldset {
@apply flex flex-grow flex-col gap-3.5;
&:has(> legend) {
@apply mt-3 border-l-4 border-solid border-muted/50 p-3 pb-0 pt-0;
}
.title-field {
@apply bg-muted/50 text-sm font-medium py-1 table ml-[-14px] pl-4 pr-3 mb-3 mt-3;
align-self: flex-start;
}
}
.multischema {
@apply mt-3;
fieldset {
margin-top: 0 !important;
}
}
}
&.hide-required-mark {
.control-label span.required {
display: none;
}
}
.form-group {
@apply flex flex-col gap-1;
&:not(.field) {
@apply flex-grow;
}
/* hide empty description if markdown is enabled */
.field-description:has(> span:empty) {
display: none;
}
.control-label span.required {
@apply ml-1 opacity-50;
}
&.field.has-error {
@apply text-red-500;
.control-label {
@apply font-bold;
}
.error-detail:not(:only-child) {
@apply font-bold list-disc pl-6;
}
.error-detail:only-child {
@apply font-bold;
}
}
}
.field-description {
@apply text-primary/70 text-sm;
}
/* input but not radio */
input:not([type="radio"]):not([type="checkbox"]) {
@apply flex bg-muted/40 h-11 rounded-md outline-none;
@apply py-2.5 px-4;
width: 100%;
&:not([disabled]):not([readonly]) {
@apply focus:outline-none focus:ring-2 focus:bg-muted focus:ring-zinc-500 focus:border-transparent transition-all;
}
&[disabled],
&[readonly] {
@apply bg-muted/50 text-primary/50 cursor-not-allowed;
}
}
textarea {
@apply flex bg-muted/40 focus:bg-muted rounded-md outline-none focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all disabled:bg-muted/50 disabled:text-primary/50;
@apply py-2.5 px-4;
width: 100%;
}
.checkbox {
label,
label > span {
@apply flex flex-row gap-2;
}
}
select {
@apply bg-muted/40 focus:bg-muted rounded-md py-2.5 pr-4 pl-2.5 outline-none focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all;
@apply disabled:bg-muted/70 disabled:text-primary/70;
@apply w-full border-r-8 border-r-transparent;
&:not([multiple]) {
@apply h-11;
}
&[multiple] {
option {
@apply py-1.5 px-2.5 bg-transparent;
&:checked {
@apply bg-primary/20;
}
}
}
}
}
}
/* alternative */
&.fieldset-alternative {
fieldset {
@apply flex flex-grow flex-col gap-3.5;
&:has(> legend) {
@apply mt-3 border-l-4 border-solid border-muted/50 p-3 pb-0 pt-0;
.btn {
@apply w-5 h-5 bg-amber-500;
}
.field-radio-group {
@apply flex flex-row gap-2;
}
&.noborder-first-fieldset {
fieldset#root {
@apply border-none p-0;
}
}
&.horizontal {
.form-group {
@apply flex-row gap-2;
}
.form-control,
.panel {
@apply flex-grow;
}
.control-label {
@apply w-32 flex h-11 items-center;
}
input {
width: auto;
}
fieldset#root {
@apply gap-6;
}
fieldset.object-field {
@apply gap-2;
}
.additional-children {
.checkbox {
@apply w-full;
}
}
}
&.hide-multi-labels {
.control-label {
display: none;
}
}
.multischema {
.form-control {
@apply flex-shrink;
}
}
.panel {
/*@apply flex flex-col gap-2;*/
/*.control-label { display: none; }*/
& > .field-radio-group {
@apply flex flex-row gap-3;
.radio,
.radio-inline {
@apply text-sm border-b border-b-transparent;
@apply font-mono text-primary/70;
input {
@apply appearance-none;
}
.title-field {
@apply bg-muted/50 text-sm font-medium py-1 table ml-[-14px] pl-4 pr-3 mb-3 mt-3;
align-self: flex-start;
&.checked {
@apply border-b-primary/70 text-primary;
}
}
}
}
.multischema {
@apply mt-3;
fieldset {
margin-top: 0 !important;
}
}
}
&.hide-required-mark {
.control-label span.required {
display: none;
}
}
.form-group {
@apply flex flex-col gap-1;
&:not(.field) {
@apply flex-grow;
}
/* hide empty description if markdown is enabled */
.field-description:has(> span:empty) {
display: none;
}
.control-label span.required {
@apply ml-1 opacity-50;
}
&.field.has-error {
@apply text-red-500;
.control-label {
@apply font-bold;
}
.error-detail:not(:only-child) {
@apply font-bold list-disc pl-6;
}
.error-detail:only-child {
@apply font-bold;
}
}
}
.field-description {
@apply text-primary/70 text-sm;
}
/* input but not radio */
input:not([type="radio"]):not([type="checkbox"]) {
@apply flex bg-muted/40 h-11 rounded-md outline-none;
@apply py-2.5 px-4;
width: 100%;
&:not([disabled]):not([readonly]) {
@apply focus:outline-none focus:ring-2 focus:bg-muted focus:ring-zinc-500 focus:border-transparent transition-all;
}
&[disabled], &[readonly] {
@apply bg-muted/50 text-primary/50 cursor-not-allowed;
}
}
textarea {
@apply flex bg-muted/40 focus:bg-muted rounded-md outline-none focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all disabled:bg-muted/50 disabled:text-primary/50;
@apply py-2.5 px-4;
width: 100%;
}
.checkbox {
label, label > span {
@apply flex flex-row gap-2;
}
}
select {
@apply bg-muted/40 focus:bg-muted rounded-md py-2.5 pr-4 pl-2.5 outline-none focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all;
@apply disabled:bg-muted/70 disabled:text-primary/70;
@apply w-full border-r-8 border-r-transparent;
&:not([multiple]) {
@apply h-11;
}
&[multiple] {
option {
@apply py-1.5 px-2.5 bg-transparent;
&:checked {
@apply bg-primary/20;
}
}
}
}
.btn {
@apply w-5 h-5 bg-amber-500;
}
.field-radio-group {
@apply flex flex-row gap-2;
}
&.noborder-first-fieldset {
fieldset#root {
@apply border-none p-0;
}
}
&.horizontal {
.form-group {
@apply flex-row gap-2;
}
.form-control, .panel {
@apply flex-grow;
}
.control-label {
@apply w-32 flex h-11 items-center;
}
input {
width: auto;
}
fieldset#root {
@apply gap-6;
}
fieldset.object-field {
@apply gap-2;
}
.additional-children {
.checkbox {
@apply w-full;
}
}
}
&.hide-multi-labels {
.control-label {
display: none;
}
}
.multischema {
.form-control {
@apply flex-shrink;
}
}
.panel {
/*@apply flex flex-col gap-2;*/
/*.control-label { display: none; }*/
& > .field-radio-group {
@apply flex flex-row gap-3;
.radio, .radio-inline {
@apply text-sm border-b border-b-transparent;
@apply font-mono text-primary/70;
input {
@apply appearance-none;
}
&.checked {
@apply border-b-primary/70 text-primary;
}
}
}
/* :not(.panel-select) .control-label {
/* :not(.panel-select) .control-label {
display: none;
} */
.panel-select select {
@apply py-1 pr-1 pl-1.5 text-sm;
@apply h-auto w-auto;
}
}
.panel-select select {
@apply py-1 pr-1 pl-1.5 text-sm;
@apply h-auto w-auto;
}
}
&.legacy {
/* first fieldset */
& > .form-group.field-object > div > fieldset {
@apply border-none p-0;
}
&.legacy {
/* first fieldset */
& > .form-group.field-object>div>fieldset {
@apply border-none p-0;
}
.row {
display: flex;
flex-direction: row;
gap: 1rem;
}
.col-xs-5 {
display: flex;
width: 50%;
}
.form-additional {
fieldset {
/* padding: 0;
.row {
display: flex;
flex-direction: row;
gap: 1rem;
}
.col-xs-5 {
display: flex;
width: 50%;
}
.form-additional {
fieldset {
/* padding: 0;
border: none; */
/* legend {
/* legend {
display: none;
} */
}
&.additional-start {
> label {
display: none;
}
&.additional-start {
> label {
display: none;
}
/* > label + div > fieldset:first-child {
/* > label + div > fieldset:first-child {
display: none;
} */
}
}
.field-object + .field-object {
@apply mt-3 pt-4 border-t border-muted;
}
.panel>.field-object>label {
display: none;
}
}
}
}
}
.field-object + .field-object {
@apply mt-3 pt-4 border-t border-muted;
}
.panel > .field-object > label {
display: none;
}
}
}

18
app/src/ui/components/form/json-schema/templates/ArrayFieldTemplate.tsx
View File

@@ -5,7 +5,7 @@ import {
type RJSFSchema,
type StrictRJSFSchema,
getTemplate,
getUiOptions
getUiOptions,
} from "@rjsf/utils";
import { cloneElement } from "react";
@@ -16,7 +16,7 @@ import { cloneElement } from "react";
export default function ArrayFieldTemplate<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
F extends FormContextType = any,
>(props: ArrayFieldTemplateProps<T, S, F>) {
const {
canAdd,
@@ -30,27 +30,27 @@ export default function ArrayFieldTemplate<
registry,
required,
schema,
title
title,
} = props;
const uiOptions = getUiOptions<T, S, F>(uiSchema);
const ArrayFieldDescriptionTemplate = getTemplate<"ArrayFieldDescriptionTemplate", T, S, F>(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
uiOptions,
);
const ArrayFieldItemTemplate = getTemplate<"ArrayFieldItemTemplate", T, S, F>(
"ArrayFieldItemTemplate",
registry,
uiOptions
uiOptions,
);
const ArrayFieldTitleTemplate = getTemplate<"ArrayFieldTitleTemplate", T, S, F>(
"ArrayFieldTitleTemplate",
registry,
uiOptions
uiOptions,
);
// Button templates are not overridden in the uiSchema
const {
ButtonTemplates: { AddButton }
ButtonTemplates: { AddButton },
} = registry.templates;
return (
<fieldset className={className} id={idSchema.$id}>
@@ -76,13 +76,13 @@ export default function ArrayFieldTemplate<
const newChildren = cloneElement(children, {
...children.props,
name: undefined,
title: undefined
title: undefined,
});
return (
<ArrayFieldItemTemplate key={key} {...itemProps} children={newChildren} />
);
}
},
)}
</div>
)}

14
app/src/ui/components/form/json-schema/templates/BaseInputTemplate.tsx
View File

@@ -5,7 +5,7 @@ import {
type StrictRJSFSchema,
ariaDescribedByIds,
examplesId,
getInputProps
getInputProps,
} from "@rjsf/utils";
import { type ChangeEvent, type FocusEvent, useCallback } from "react";
import { Label } from "./FieldTemplate";
@@ -19,7 +19,7 @@ import { Label } from "./FieldTemplate";
export default function BaseInputTemplate<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
F extends FormContextType = any,
>(props: BaseInputTemplateProps<T, S, F>) {
const {
id,
@@ -52,7 +52,7 @@ export default function BaseInputTemplate<
}
const inputProps = {
...rest,
...getInputProps<T, S, F>(schema, type, options)
...getInputProps<T, S, F>(schema, type, options),
};
let inputValue;
@@ -65,15 +65,15 @@ export default function BaseInputTemplate<
const _onChange = useCallback(
({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
onChange(value === "" ? options.emptyValue : value),
[onChange, options]
[onChange, options],
);
const _onBlur = useCallback(
({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value),
[onBlur, id]
[onBlur, id],
);
const _onFocus = useCallback(
({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value),
[onFocus, id]
[onFocus, id],
);
const shouldHideLabel =
@@ -108,7 +108,7 @@ export default function BaseInputTemplate<
.concat(
schema.default && !schema.examples.includes(schema.default)
? ([schema.default] as string[])
: []
: [],
)
.map((example: any) => {
return <option key={example} value={example} />;

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

@@ -4,7 +4,7 @@ import {
type RJSFSchema,
type StrictRJSFSchema,
getTemplate,
getUiOptions
getUiOptions,
} from "@rjsf/utils";
import { identifierToHumanReadable } from "core/utils";
import { twMerge } from "tailwind-merge";
@@ -45,7 +45,7 @@ export function Label(props: LabelProps) {
export function FieldTemplate<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
F extends FormContextType = any,
>(props: FieldTemplateProps<T, S, F>) {
const {
id,
@@ -58,14 +58,14 @@ export function FieldTemplate<
required,
displayLabel,
registry,
uiSchema
uiSchema,
} = props;
const uiOptions = getUiOptions(uiSchema, registry.globalUiOptions);
//console.log("field---", uiOptions);
const WrapIfAdditionalTemplate = getTemplate<"WrapIfAdditionalTemplate", T, S, F>(
"WrapIfAdditionalTemplate",
registry,
uiOptions
uiOptions,
);
if (hidden) {
return <div className="hidden">{children}</div>;
@@ -81,7 +81,7 @@ export function FieldTemplate<
"flex flex-grow additional-children",
uiOptions.flexDirection === "row"
? "flex-row items-center gap-3"
: "flex-col flex-grow gap-2"
: "flex-col flex-grow gap-2",
)}
>
{children}

12
app/src/ui/components/form/json-schema/templates/ObjectFieldTemplate.tsx
View File

@@ -8,7 +8,7 @@ import {
descriptionId,
getTemplate,
getUiOptions,
titleId
titleId,
} from "@rjsf/utils";
/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
@@ -20,7 +20,7 @@ import {
export default function ObjectFieldTemplate<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
F extends FormContextType = any,
>(props: ObjectFieldTemplateProps<T, S, F>) {
const {
description,
@@ -34,18 +34,18 @@ export default function ObjectFieldTemplate<
required,
schema,
title,
uiSchema
uiSchema,
} = props;
const options = getUiOptions<T, S, F>(uiSchema);
const TitleFieldTemplate = getTemplate<"TitleFieldTemplate", T, S, F>(
"TitleFieldTemplate",
registry,
options
options,
);
const DescriptionFieldTemplate = getTemplate<"DescriptionFieldTemplate", T, S, F>(
"DescriptionFieldTemplate",
registry,
options
options,
);
/* if (properties.length === 0) {
@@ -59,7 +59,7 @@ export default function ObjectFieldTemplate<
// Button templates are not overridden in the uiSchema
const {
ButtonTemplates: { AddButton }
ButtonTemplates: { AddButton },
} = registry.templates;
return (

2
app/src/ui/components/form/json-schema/templates/TitleFieldTemplate.tsx
View File

@@ -10,7 +10,7 @@ const REQUIRED_FIELD_SYMBOL = "*";
export default function TitleField<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
F extends FormContextType = any,
>(props: TitleFieldProps<T, S, F>) {
const { id, title, required } = props;
return (

6
app/src/ui/components/form/json-schema/templates/WrapIfAdditionalTemplate.tsx
View File

@@ -4,7 +4,7 @@ import {
type RJSFSchema,
type StrictRJSFSchema,
TranslatableString,
type WrapIfAdditionalTemplateProps
type WrapIfAdditionalTemplateProps,
} from "@rjsf/utils";
import { useState } from "react";
@@ -16,7 +16,7 @@ import { useState } from "react";
export default function WrapIfAdditionalTemplate<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
F extends FormContextType = any,
>(props: WrapIfAdditionalTemplateProps<T, S, F>) {
const {
id,
@@ -31,7 +31,7 @@ export default function WrapIfAdditionalTemplate<
schema,
children,
uiSchema,
registry
registry,
} = props;
const { templates, translateString } = registry;
// Button templates are not overridden in the uiSchema

2
app/src/ui/components/form/json-schema/templates/index.ts
View File

@@ -15,5 +15,5 @@ export const templates = {
TitleFieldTemplate,
ObjectFieldTemplate,
BaseInputTemplate,
WrapIfAdditionalTemplate
WrapIfAdditionalTemplate,
};

10
app/src/ui/components/form/json-schema/typebox/RJSFTypeboxValidator.ts
View File

@@ -9,7 +9,7 @@ import type {
StrictRJSFSchema,
UiSchema,
ValidationData,
ValidatorType
ValidatorType,
} from "@rjsf/utils";
import { toErrorSchema } from "@rjsf/utils";
@@ -33,7 +33,7 @@ export class RJSFTypeboxValidator<T = any, S extends StrictRJSFSchema = RJSFSche
return {
errors: [...Errors(tbSchema, formData)],
validationError: null as any
validationError: null as any,
};
}
@@ -42,7 +42,7 @@ export class RJSFTypeboxValidator<T = any, S extends StrictRJSFSchema = RJSFSche
schema: S,
customValidate?: CustomValidator,
transformErrors?: ErrorTransformer,
uiSchema?: UiSchema
uiSchema?: UiSchema,
): ValidationData<T> {
const { errors } = this.rawValidation(schema, formData);
@@ -54,13 +54,13 @@ export class RJSFTypeboxValidator<T = any, S extends StrictRJSFSchema = RJSFSche
message: error.message,
property: "." + schemaLocation,
schemaPath: error.path,
stack: error.message
stack: error.message,
};
});
return {
errors: transformedErrors,
errorSchema: toErrorSchema(transformedErrors)
errorSchema: toErrorSchema(transformedErrors),
} as any;
}

6
app/src/ui/components/form/json-schema/typebox/from-schema.ts
View File

@@ -218,7 +218,7 @@ function FromConst<T extends SConst>(T: T) {
// ------------------------------------------------------------------
type TFromPropertiesIsOptional<
K extends PropertyKey,
R extends string | unknown
R extends string | unknown,
> = unknown extends R ? true : K extends R ? false : true;
// prettier-ignore
// biome-ignore format:
@@ -243,13 +243,13 @@ function FromObject<T extends SObject>(T: T): TFromObject<T> {
// biome-ignore lint: reason
T.required && T.required.includes(K)
? FromSchema(T.properties[K])
: Type.Optional(FromSchema(T.properties[K]))
: Type.Optional(FromSchema(T.properties[K])),
};
}, {} as Type.TProperties);
if ("additionalProperties" in T) {
return Type.Object(properties, {
additionalProperties: FromSchema(T.additionalProperties)
additionalProperties: FromSchema(T.additionalProperties),
}) as never;
}

4
app/src/ui/components/form/json-schema/widgets/CheckboxWidget.tsx
View File

@@ -5,7 +5,7 @@ import { type ChangeEvent, useCallback } from "react";
export function CheckboxWidget<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
F extends FormContextType = any,
>({
schema,
uiSchema,
@@ -33,7 +33,7 @@ export function CheckboxWidget<
});*/
const handleChange = useCallback(
(event: ChangeEvent<HTMLInputElement>) => onChange(event.target.checked),
[onChange]
[onChange],
);
return (

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

@@ -8,7 +8,7 @@ import {
enumOptionsIsSelected,
enumOptionsSelectValue,
enumOptionsValueForIndex,
optionId
optionId,
} from "@rjsf/utils";
import { type ChangeEvent, type FocusEvent, useCallback } from "react";
@@ -20,7 +20,7 @@ import { type ChangeEvent, type FocusEvent, useCallback } from "react";
function CheckboxesWidget<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
F extends FormContextType = any,
>({
id,
disabled,
@@ -30,20 +30,20 @@ function CheckboxesWidget<
readonly,
onChange,
onBlur,
onFocus
onFocus,
}: WidgetProps<T, S, F>) {
const checkboxesValues = Array.isArray(value) ? value : [value];
const handleBlur = useCallback(
({ target }: FocusEvent<HTMLInputElement>) =>
onBlur(id, enumOptionsValueForIndex<S>(target?.value, enumOptions, emptyValue)),
[onBlur, id]
[onBlur, id],
);
const handleFocus = useCallback(
({ target }: FocusEvent<HTMLInputElement>) =>
onFocus(id, enumOptionsValueForIndex<S>(target?.value, enumOptions, emptyValue)),
[onFocus, id]
[onFocus, id],
);
return (
<div className="checkboxes" id={id}>

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

@@ -6,7 +6,7 @@ import {
ariaDescribedByIds,
enumOptionsIsSelected,
enumOptionsValueForIndex,
optionId
optionId,
} from "@rjsf/utils";
import { type FocusEvent, useCallback } from "react";
@@ -18,7 +18,7 @@ import { type FocusEvent, useCallback } from "react";
function RadioWidget<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
F extends FormContextType = any,
>({
options,
value,
@@ -29,20 +29,20 @@ function RadioWidget<
onBlur,
onFocus,
onChange,
id
id,
}: WidgetProps<T, S, F>) {
const { enumOptions, enumDisabled, inline, emptyValue } = options;
const handleBlur = useCallback(
({ target: { value } }: FocusEvent<HTMLInputElement>) =>
onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue)),
[onBlur, id]
[onBlur, id],
);
const handleFocus = useCallback(
({ target: { value } }: FocusEvent<HTMLInputElement>) =>
onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue)),
[onFocus, id]
[onFocus, id],
);
return (

12
app/src/ui/components/form/json-schema/widgets/SelectWidget.tsx
View File

@@ -5,7 +5,7 @@ import {
type WidgetProps,
ariaDescribedByIds,
enumOptionsIndexForValue,
enumOptionsValueForIndex
enumOptionsValueForIndex,
} from "@rjsf/utils";
import { type ChangeEvent, type FocusEvent, type SyntheticEvent, useCallback } from "react";
@@ -27,7 +27,7 @@ function getValue(event: SyntheticEvent<HTMLSelectElement>, multiple: boolean) {
function SelectWidget<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
F extends FormContextType = any,
>({
schema,
id,
@@ -41,7 +41,7 @@ function SelectWidget<
onChange,
onBlur,
onFocus,
placeholder
placeholder,
}: WidgetProps<T, S, F>) {
const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
const emptyValue = multiple ? [] : "";
@@ -51,7 +51,7 @@ function SelectWidget<
const newValue = getValue(event, multiple);
return onFocus(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
},
[onFocus, id, schema, multiple, enumOptions, optEmptyVal]
[onFocus, id, schema, multiple, enumOptions, optEmptyVal],
);
const handleBlur = useCallback(
@@ -59,7 +59,7 @@ function SelectWidget<
const newValue = getValue(event, multiple);
return onBlur(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
},
[onBlur, id, schema, multiple, enumOptions, optEmptyVal]
[onBlur, id, schema, multiple, enumOptions, optEmptyVal],
);
const handleChange = useCallback(
@@ -67,7 +67,7 @@ function SelectWidget<
const newValue = getValue(event, multiple);
return onChange(enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
},
[onChange, schema, multiple, enumOptions, optEmptyVal]
[onChange, schema, multiple, enumOptions, optEmptyVal],
);
const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);

2
app/src/ui/components/form/json-schema/widgets/index.tsx
View File

@@ -26,5 +26,5 @@ export const widgets = {
CheckboxWidget: WithLabel(CheckboxWidget),
SelectWidget: WithLabel(SelectWidget, "select"),
CheckboxesWidget: WithLabel(CheckboxesWidget),
JsonWidget: WithLabel(JsonWidget)
JsonWidget: WithLabel(JsonWidget),
};

14
app/src/ui/components/form/native-form/NativeForm.tsx
View File

@@ -4,7 +4,7 @@ import {
type FormEvent,
useEffect,
useRef,
useState
useState,
} from "react";
import { useEvent } from "ui/hooks/use-event";
import {
@@ -14,7 +14,7 @@ import {
coerce,
getFormTarget,
getTargetsByName,
setPath
setPath,
} from "./utils";
export type NativeFormProps = {
@@ -25,12 +25,12 @@ export type NativeFormProps = {
onSubmit?: (data: any, ctx: { event: FormEvent<HTMLFormElement> }) => Promise<void> | void;
onSubmitInvalid?: (
errors: InputError[],
ctx: { event: FormEvent<HTMLFormElement> }
ctx: { event: FormEvent<HTMLFormElement> },
) => Promise<void> | void;
onError?: (errors: InputError[]) => void;
onChange?: (
data: any,
ctx: { event: ChangeEvent<HTMLFormElement>; key: string; value: any; errors: InputError[] }
ctx: { event: ChangeEvent<HTMLFormElement>; key: string; value: any; errors: InputError[] },
) => Promise<void> | void;
clean?: CleanOptions | true;
} & Omit<ComponentPropsWithoutRef<"form">, "onChange" | "onSubmit">;
@@ -77,13 +77,13 @@ export function NativeForm({
const validateElement = useEvent((el: InputElement | null, opts?: { report?: boolean }) => {
if (props.noValidate || !el || !("name" in el)) return;
const errorElement = formRef.current?.querySelector(
errorFieldSelector?.(el.name) ?? `[data-role="input-error"][data-name="${el.name}"]`
errorFieldSelector?.(el.name) ?? `[data-role="input-error"][data-name="${el.name}"]`,
);
if (!el.checkValidity()) {
const error = {
name: el.name,
message: el.validationMessage
message: el.validationMessage,
};
setErrors((prev) => [...prev.filter((e) => e.name !== el.name), error]);
@@ -165,7 +165,7 @@ export function NativeForm({
event: e,
key: target.name,
value: target.value,
errors
errors,
});
}
});

4
app/src/ui/components/form/native-form/utils.ts
View File

@@ -70,14 +70,14 @@ export type CleanOptions = {
};
export function cleanObject<Obj extends { [key: string]: any }>(
obj: Obj,
_opts?: CleanOptions
_opts?: CleanOptions,
): Obj {
if (!obj) return obj;
const _empty = [null, undefined, ""];
const opts = {
empty: _opts?.empty ?? _empty,
emptyInArray: _opts?.emptyInArray ?? _empty,
keepEmptyArray: _opts?.keepEmptyArray ?? false
keepEmptyArray: _opts?.keepEmptyArray ?? false,
};
return Object.entries(obj).reduce((acc, [key, value]) => {