Add monorepo support to project (#682)
* feat: add monorepo support * fix: correct relatedProjects structure in vercel.json * update github actions with monorepo support * removed legacy dep * moved jsr config into web package
This commit is contained in:
Dan Ditomaso
@@ -0,0 +1,217 @@
|
||||
import {
|
||||
DynamicFormField,
|
||||
type FieldProps,
|
||||
} from "@components/Form/DynamicFormField.tsx";
|
||||
import { FieldWrapper } from "@components/Form/FormWrapper.tsx";
|
||||
import { Button } from "@components/UI/Button.tsx";
|
||||
import { Subtle } from "@components/UI/Typography/Subtle.tsx";
|
||||
import {
|
||||
type Control,
|
||||
type DefaultValues,
|
||||
type FieldValues,
|
||||
FormProvider,
|
||||
get,
|
||||
type Path,
|
||||
type SubmitHandler,
|
||||
useForm,
|
||||
type UseFormReturn,
|
||||
} from "react-hook-form";
|
||||
import { Heading } from "@components/UI/Typography/Heading.tsx";
|
||||
import { ZodType } from "zod/v4";
|
||||
import { useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { createZodResolver } from "@components/Form/createZodResolver.ts";
|
||||
import { useAppStore } from "@core/stores/appStore.ts";
|
||||
import { dotPaths } from "@core/utils/dotPath.ts";
|
||||
|
||||
interface DisabledBy<T> {
|
||||
fieldName: Path<T>;
|
||||
selector?: number;
|
||||
invert?: boolean;
|
||||
}
|
||||
|
||||
export interface BaseFormBuilderProps<T> {
|
||||
name: Path<T>;
|
||||
disabled?: boolean;
|
||||
disabledBy?: DisabledBy<T>[];
|
||||
label: string;
|
||||
description?: string;
|
||||
notes?: string;
|
||||
validationText?: string;
|
||||
properties?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface GenericFormElementProps<T extends FieldValues, Y> {
|
||||
control: Control<T>;
|
||||
disabled?: boolean;
|
||||
field: Y;
|
||||
isDirty?: boolean;
|
||||
invalid?: boolean;
|
||||
}
|
||||
|
||||
export interface DynamicFormProps<T extends FieldValues> {
|
||||
propMethods?: UseFormReturn<T, T, T>;
|
||||
onSubmit: SubmitHandler<T>;
|
||||
onFormInit?: DynamicFormFormInit<T>;
|
||||
submitType?: "onChange" | "onSubmit";
|
||||
hasSubmitButton?: boolean;
|
||||
defaultValues?: DefaultValues<T>;
|
||||
values?: T;
|
||||
fieldGroups: {
|
||||
label: string;
|
||||
description: string;
|
||||
notes?: string;
|
||||
valid?: boolean;
|
||||
validationText?: string;
|
||||
fields: FieldProps<T>[];
|
||||
}[];
|
||||
validationSchema?: ZodType<T>;
|
||||
formId?: string;
|
||||
}
|
||||
|
||||
export type DynamicFormFormInit<T extends FieldValues> = (
|
||||
methods: UseFormReturn<T, T, T>,
|
||||
) => void;
|
||||
|
||||
export function DynamicForm<T extends FieldValues>({
|
||||
propMethods,
|
||||
onSubmit,
|
||||
onFormInit,
|
||||
submitType = "onChange",
|
||||
hasSubmitButton,
|
||||
defaultValues,
|
||||
values,
|
||||
fieldGroups,
|
||||
validationSchema,
|
||||
formId,
|
||||
}: DynamicFormProps<T>) {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
addError,
|
||||
removeError,
|
||||
} = useAppStore();
|
||||
|
||||
let methods = propMethods;
|
||||
if (!methods) {
|
||||
methods = useForm<
|
||||
T
|
||||
>({
|
||||
mode: "onChange",
|
||||
defaultValues: defaultValues,
|
||||
resolver: validationSchema
|
||||
? createZodResolver(validationSchema)
|
||||
: undefined,
|
||||
shouldFocusError: false,
|
||||
resetOptions: { keepDefaultValues: true },
|
||||
values,
|
||||
});
|
||||
}
|
||||
const { handleSubmit, control, getValues, formState, getFieldState } =
|
||||
methods;
|
||||
|
||||
useEffect(() => {
|
||||
if (!propMethods) {
|
||||
onFormInit?.(methods);
|
||||
}
|
||||
}, [onFormInit, propMethods, methods]);
|
||||
|
||||
useEffect(() => {
|
||||
const errorKeys = Object.keys(formState.errors);
|
||||
if (formId) {
|
||||
if (
|
||||
errorKeys.length === 0
|
||||
) {
|
||||
dotPaths(getValues()).forEach((key) => {
|
||||
removeError(key);
|
||||
});
|
||||
removeError(formId);
|
||||
} else {
|
||||
errorKeys.forEach((key) => {
|
||||
addError(key, "");
|
||||
});
|
||||
addError(formId, "");
|
||||
}
|
||||
}
|
||||
}, [formState.errors]);
|
||||
|
||||
const isDisabled = (
|
||||
disabledBy?: DisabledBy<T>[],
|
||||
disabled?: boolean,
|
||||
): boolean => {
|
||||
if (disabled) return true;
|
||||
if (!disabledBy) return false;
|
||||
|
||||
return disabledBy.some((field) => {
|
||||
const value = getValues(field.fieldName);
|
||||
if (value === "always") return true;
|
||||
if (typeof value === "boolean") return field.invert ? value : !value;
|
||||
if (typeof value === "number") {
|
||||
return field.invert
|
||||
? field.selector !== value
|
||||
: field.selector === value;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form
|
||||
className="space-y-8"
|
||||
{...(submitType === "onSubmit"
|
||||
? { onSubmit: handleSubmit(onSubmit) }
|
||||
: { onChange: handleSubmit(onSubmit) })}
|
||||
>
|
||||
{fieldGroups.map((fieldGroup) => (
|
||||
<div key={fieldGroup.label} className="space-y-8 sm:space-y-5">
|
||||
<div>
|
||||
<Heading as="h4" className="font-medium">
|
||||
{fieldGroup.label}
|
||||
</Heading>
|
||||
<Subtle>{fieldGroup.description}</Subtle>
|
||||
<Subtle className="font-semibold">{fieldGroup?.notes}</Subtle>
|
||||
</div>
|
||||
|
||||
{fieldGroup.fields.map((field) => {
|
||||
const error = get(formState.errors, field.name as string);
|
||||
return (
|
||||
<FieldWrapper
|
||||
key={field.label}
|
||||
label={field.label}
|
||||
fieldName={field.name}
|
||||
description={field.description}
|
||||
valid={!error}
|
||||
validationText={error
|
||||
? String(
|
||||
t([`formValidation.${error.type}`, error.message], {
|
||||
returnObjects: false,
|
||||
...error.params,
|
||||
}),
|
||||
)
|
||||
: ""}
|
||||
>
|
||||
<DynamicFormField
|
||||
field={field}
|
||||
control={control}
|
||||
disabled={isDisabled(field.disabledBy, field.disabled)}
|
||||
isDirty={getFieldState(field.name).isDirty}
|
||||
invalid={getFieldState(field.name).invalid}
|
||||
/>
|
||||
</FieldWrapper>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
{hasSubmitButton && (
|
||||
<Button
|
||||
type="submit"
|
||||
variant="outline"
|
||||
disabled={!formState.isValid}
|
||||
>
|
||||
{t("button.submit")}
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import {
|
||||
type MultiSelectFieldProps,
|
||||
MultiSelectInput,
|
||||
} from "./FormMultiSelect.tsx";
|
||||
import {
|
||||
GenericInput,
|
||||
type InputFieldProps,
|
||||
} from "@components/Form/FormInput.tsx";
|
||||
import {
|
||||
PasswordGenerator,
|
||||
type PasswordGeneratorProps,
|
||||
} from "@components/Form/FormPasswordGenerator.tsx";
|
||||
import {
|
||||
type SelectFieldProps,
|
||||
SelectInput,
|
||||
} from "@components/Form/FormSelect.tsx";
|
||||
import {
|
||||
type ToggleFieldProps,
|
||||
ToggleInput,
|
||||
} from "@components/Form/FormToggle.tsx";
|
||||
import type { Control, FieldValues } from "react-hook-form";
|
||||
|
||||
export type FieldProps<T> =
|
||||
| InputFieldProps<T>
|
||||
| SelectFieldProps<T>
|
||||
| MultiSelectFieldProps<T>
|
||||
| ToggleFieldProps<T>
|
||||
| PasswordGeneratorProps<T>;
|
||||
|
||||
export interface DynamicFormFieldProps<T extends FieldValues> {
|
||||
field: FieldProps<T>;
|
||||
control: Control<T>;
|
||||
disabled?: boolean;
|
||||
isDirty?: boolean;
|
||||
invalid?: boolean;
|
||||
}
|
||||
|
||||
export function DynamicFormField<T extends FieldValues>({
|
||||
field,
|
||||
control,
|
||||
disabled,
|
||||
isDirty,
|
||||
invalid,
|
||||
}: DynamicFormFieldProps<T>) {
|
||||
switch (field.type) {
|
||||
case "text":
|
||||
case "password":
|
||||
case "number":
|
||||
return (
|
||||
<GenericInput
|
||||
field={field}
|
||||
control={control}
|
||||
disabled={disabled}
|
||||
isDirty={isDirty}
|
||||
invalid={invalid}
|
||||
/>
|
||||
);
|
||||
|
||||
case "toggle":
|
||||
return (
|
||||
<ToggleInput
|
||||
field={field}
|
||||
control={control}
|
||||
disabled={disabled}
|
||||
isDirty={isDirty}
|
||||
invalid={invalid}
|
||||
/>
|
||||
);
|
||||
case "select":
|
||||
return (
|
||||
<SelectInput
|
||||
field={field}
|
||||
control={control}
|
||||
disabled={disabled}
|
||||
isDirty={isDirty}
|
||||
invalid={invalid}
|
||||
/>
|
||||
);
|
||||
case "passwordGenerator":
|
||||
return (
|
||||
<PasswordGenerator
|
||||
field={field}
|
||||
control={control}
|
||||
disabled={disabled}
|
||||
isDirty={isDirty}
|
||||
invalid={invalid}
|
||||
/>
|
||||
);
|
||||
case "multiSelect":
|
||||
return (
|
||||
<MultiSelectInput
|
||||
field={field}
|
||||
control={control}
|
||||
disabled={disabled}
|
||||
isDirty={isDirty}
|
||||
invalid={invalid}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import type {
|
||||
BaseFormBuilderProps,
|
||||
GenericFormElementProps,
|
||||
} from "@components/Form/DynamicForm.tsx";
|
||||
import { Input } from "@components/UI/Input.tsx";
|
||||
import type { ChangeEventHandler } from "react";
|
||||
import { type FieldValues, useController } from "react-hook-form";
|
||||
|
||||
export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
|
||||
type: "text" | "number" | "password";
|
||||
inputChange?: ChangeEventHandler;
|
||||
prefix?: string;
|
||||
properties?: {
|
||||
id?: string;
|
||||
suffix?: string;
|
||||
step?: number;
|
||||
className?: string;
|
||||
fieldLength?: {
|
||||
min?: number;
|
||||
max?: number;
|
||||
currentValueLength?: number;
|
||||
showCharacterCount?: boolean;
|
||||
};
|
||||
showPasswordToggle?: boolean;
|
||||
showCopyButton?: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export function GenericInput<T extends FieldValues>({
|
||||
control,
|
||||
disabled,
|
||||
field,
|
||||
invalid,
|
||||
}: GenericFormElementProps<T, InputFieldProps<T>>) {
|
||||
const { fieldLength, ...restProperties } = field.properties || {};
|
||||
|
||||
const {
|
||||
field: controllerField,
|
||||
fieldState: { error, isDirty },
|
||||
} = useController({
|
||||
name: field.name,
|
||||
control,
|
||||
rules: {
|
||||
minLength: field.properties?.fieldLength?.min,
|
||||
maxLength: field.properties?.fieldLength?.max,
|
||||
},
|
||||
});
|
||||
|
||||
const isInvalid = invalid || Boolean(error?.message);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = e.target.value;
|
||||
|
||||
if (
|
||||
field.properties?.fieldLength?.max &&
|
||||
newValue.length > field.properties.fieldLength.max
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (field.inputChange) field.inputChange(e);
|
||||
|
||||
controllerField.onChange(
|
||||
field.type === "number"
|
||||
? Number.parseFloat(newValue).toString()
|
||||
: newValue,
|
||||
);
|
||||
};
|
||||
|
||||
const currentLength = controllerField.value
|
||||
? String(controllerField.value).length
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
type={field.type}
|
||||
step={field.properties?.step}
|
||||
value={field.type === "number"
|
||||
? String(controllerField.value)
|
||||
: controllerField.value}
|
||||
id={field.name}
|
||||
onChange={handleInputChange}
|
||||
showCopyButton={field.properties?.showCopyButton}
|
||||
showPasswordToggle={field.properties?.showPasswordToggle ||
|
||||
field.type === "password"}
|
||||
className={field.properties?.className}
|
||||
{...restProperties}
|
||||
disabled={disabled}
|
||||
variant={error ? "invalid" : isDirty ? "dirty" : "default"}
|
||||
/>
|
||||
|
||||
{fieldLength?.showCharacterCount && fieldLength.max && (
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-slate-900 dark:text-slate-200">
|
||||
{currentLength}/{fieldLength.max}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isInvalid && (
|
||||
<div className="absolute inset-y-12 bottom-0 flex items-center pr-3">
|
||||
<p className="text-sm text-red-500">{error?.message ?? ""}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import type {
|
||||
BaseFormBuilderProps,
|
||||
GenericFormElementProps,
|
||||
} from "@components/Form/DynamicForm.tsx";
|
||||
import type { FieldValues } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { FLAGS_CONFIG } from "@core/hooks/usePositionFlags.ts";
|
||||
import { MultiSelect, MultiSelectItem } from "../UI/MultiSelect.tsx";
|
||||
import { cn } from "@core/utils/cn.ts";
|
||||
|
||||
export interface MultiSelectFieldProps<T> extends BaseFormBuilderProps<T> {
|
||||
type: "multiSelect";
|
||||
placeholder?: string;
|
||||
onValueChange: (name: string) => void;
|
||||
isChecked: (name: string) => boolean;
|
||||
value: string[];
|
||||
properties: BaseFormBuilderProps<T>["properties"] & {
|
||||
enumValue:
|
||||
| { [s: string]: string | number }
|
||||
| typeof FLAGS_CONFIG;
|
||||
formatEnumName?: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export function MultiSelectInput<T extends FieldValues>({
|
||||
field,
|
||||
isDirty,
|
||||
invalid,
|
||||
}: GenericFormElementProps<T, MultiSelectFieldProps<T>>) {
|
||||
const { t } = useTranslation("deviceConfig");
|
||||
const { enumValue, className, ...remainingProperties } = field.properties;
|
||||
|
||||
const isNewConfigStructure =
|
||||
typeof Object.values(enumValue)[0] === "object" &&
|
||||
Object.values(enumValue)[0] !== null &&
|
||||
"i18nKey" in Object.values(enumValue)[0];
|
||||
|
||||
const optionsToRender = Object.entries(enumValue).map(
|
||||
([key, configOrValue]) => {
|
||||
if (isNewConfigStructure) {
|
||||
const config =
|
||||
configOrValue as typeof FLAGS_CONFIG[keyof typeof FLAGS_CONFIG];
|
||||
return {
|
||||
key,
|
||||
display: t(config.i18nKey),
|
||||
value: config.value,
|
||||
};
|
||||
}
|
||||
return { key, display: key, value: configOrValue as number };
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<MultiSelect
|
||||
className={cn([
|
||||
className,
|
||||
"rounded-md",
|
||||
isDirty ? "focus:ring-sky-500 ring-sky-500 ring-2 ring-offset-5" : "",
|
||||
invalid ? "focus:ring-red-500 ring-red-500 ring-2 ring-offset-5" : "",
|
||||
])}
|
||||
{...remainingProperties}
|
||||
>
|
||||
{optionsToRender.map((option) => {
|
||||
return (
|
||||
<MultiSelectItem
|
||||
key={option.key}
|
||||
name={option.key}
|
||||
value={option.value.toString()}
|
||||
checked={field.isChecked(option.key)}
|
||||
onCheckedChange={() => field.onValueChange(option.key)}
|
||||
>
|
||||
{option.display}
|
||||
</MultiSelectItem>
|
||||
);
|
||||
})}
|
||||
</MultiSelect>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import type {
|
||||
BaseFormBuilderProps,
|
||||
GenericFormElementProps,
|
||||
} from "@components/Form/DynamicForm.tsx";
|
||||
import type { ButtonVariant } from "../UI/Button.tsx";
|
||||
import { Generator } from "@components/UI/Generator.tsx";
|
||||
import { Controller, type FieldValues, useFormContext } from "react-hook-form";
|
||||
import { usePasswordVisibilityToggle } from "@core/hooks/usePasswordVisibilityToggle.ts";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
|
||||
type: "passwordGenerator";
|
||||
id: string;
|
||||
hide?: boolean;
|
||||
bits?: { text: string; value: string; key: string }[];
|
||||
devicePSKBitCount: number;
|
||||
inputChange?: React.ChangeEventHandler<HTMLInputElement>;
|
||||
selectChange?: (event: string) => void;
|
||||
actionButtons: {
|
||||
text: string;
|
||||
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
||||
variant: ButtonVariant;
|
||||
className?: string;
|
||||
}[];
|
||||
showPasswordToggle?: boolean;
|
||||
showCopyButton?: boolean;
|
||||
}
|
||||
|
||||
export function PasswordGenerator<T extends FieldValues>({
|
||||
control,
|
||||
field,
|
||||
disabled,
|
||||
isDirty,
|
||||
invalid,
|
||||
}: GenericFormElementProps<T, PasswordGeneratorProps<T>>) {
|
||||
const { isVisible } = usePasswordVisibilityToggle();
|
||||
const { trigger } = useFormContext();
|
||||
|
||||
useEffect(() => {
|
||||
trigger(field.name);
|
||||
}, [field.devicePSKBitCount, field.name, trigger]);
|
||||
|
||||
return (
|
||||
<Controller
|
||||
name={field.name}
|
||||
control={control}
|
||||
render={(
|
||||
{
|
||||
field: { value, onChange, ...rest },
|
||||
},
|
||||
) => (
|
||||
<Generator
|
||||
type={field.hide && !isVisible ? "password" : "text"}
|
||||
id={field.id}
|
||||
devicePSKBitCount={field.devicePSKBitCount}
|
||||
bits={field.bits}
|
||||
inputChange={(e) => {
|
||||
if (field.inputChange) field.inputChange(e);
|
||||
onChange(e);
|
||||
}}
|
||||
selectChange={field.selectChange ?? (() => {})}
|
||||
value={value}
|
||||
variant={invalid ? "invalid" : isDirty ? "dirty" : "default"}
|
||||
actionButtons={field.actionButtons}
|
||||
showPasswordToggle={field.showPasswordToggle}
|
||||
showCopyButton={field.showCopyButton}
|
||||
{...field.properties}
|
||||
{...rest}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import type {
|
||||
BaseFormBuilderProps,
|
||||
GenericFormElementProps,
|
||||
} from "@components/Form/DynamicForm.tsx";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@components/UI/Select.tsx";
|
||||
import { type FieldValues, useController } from "react-hook-form";
|
||||
import { cn } from "@core/utils/cn.ts";
|
||||
|
||||
export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
|
||||
type: "select";
|
||||
selectChange?: (e: string, name: string) => void;
|
||||
validate?: (newValue: string) => Promise<boolean>;
|
||||
defaultValue?: string;
|
||||
properties: BaseFormBuilderProps<T>["properties"] & {
|
||||
defaultValue?: T;
|
||||
enumValue: {
|
||||
[s: string]: string | number;
|
||||
};
|
||||
formatEnumName?: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
const formatEnumDisplay = (name: string): string => {
|
||||
return name
|
||||
.replace(/_/g, " ")
|
||||
.toLowerCase()
|
||||
.split(" ")
|
||||
.map((s) => s.charAt(0).toUpperCase() + s.substring(1))
|
||||
.join(" ");
|
||||
};
|
||||
|
||||
export function SelectInput<T extends FieldValues>({
|
||||
control,
|
||||
disabled,
|
||||
field,
|
||||
isDirty,
|
||||
invalid,
|
||||
}: GenericFormElementProps<T, SelectFieldProps<T>>) {
|
||||
const {
|
||||
field: { value, onChange, ref, onBlur, ...rest },
|
||||
} = useController({
|
||||
name: field.name,
|
||||
control,
|
||||
});
|
||||
|
||||
const {
|
||||
enumValue,
|
||||
formatEnumName,
|
||||
defaultValue,
|
||||
className,
|
||||
...remainingProperties
|
||||
} = field.properties;
|
||||
const valueToKeyMap: Record<string, string> = {};
|
||||
const optionsEnumValues: [string, number][] = [];
|
||||
|
||||
if (enumValue) {
|
||||
Object.entries(enumValue).forEach(([key, val]) => {
|
||||
if (typeof val === "number") {
|
||||
valueToKeyMap[val.toString()] = key;
|
||||
optionsEnumValues.push([key, val]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const handleValueChange = async (newValue: string) => {
|
||||
const selectedKey = valueToKeyMap[newValue];
|
||||
|
||||
if (field.validate) {
|
||||
const isValid = await field.validate(selectedKey);
|
||||
if (!isValid) return;
|
||||
}
|
||||
|
||||
if (field.selectChange) field.selectChange(newValue, selectedKey);
|
||||
onChange(Number.parseInt(newValue));
|
||||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
onValueChange={handleValueChange}
|
||||
disabled={disabled}
|
||||
value={value?.toString()}
|
||||
defaultValue={defaultValue?.toString()}
|
||||
{...rest}
|
||||
>
|
||||
<SelectTrigger
|
||||
id={field.name}
|
||||
className={cn([
|
||||
className,
|
||||
isDirty ? "focus:ring-sky-500 ring-sky-500 ring-2 ring-offset-2" : "",
|
||||
invalid
|
||||
? "focus:ring-red-500 ring-red-500 ring-2 outline-offset-2"
|
||||
: "",
|
||||
])}
|
||||
ref={ref}
|
||||
onBlur={onBlur}
|
||||
{...remainingProperties}
|
||||
>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{optionsEnumValues.map(([name, val]) => (
|
||||
<SelectItem key={name} value={val.toString()}>
|
||||
{formatEnumName ? formatEnumDisplay(name) : name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import type {
|
||||
BaseFormBuilderProps,
|
||||
GenericFormElementProps,
|
||||
} from "@components/Form/DynamicForm.tsx";
|
||||
import { Switch } from "@components/UI/Switch.tsx";
|
||||
import { Controller, type FieldValues } from "react-hook-form";
|
||||
import { cn } from "@core/utils/cn.ts";
|
||||
|
||||
export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> {
|
||||
type: "toggle";
|
||||
inputChange?: (value: boolean) => void;
|
||||
}
|
||||
|
||||
export function ToggleInput<T extends FieldValues>({
|
||||
control,
|
||||
disabled,
|
||||
field,
|
||||
isDirty,
|
||||
invalid,
|
||||
}: GenericFormElementProps<T, ToggleFieldProps<T>>) {
|
||||
return (
|
||||
<Controller
|
||||
name={field.name}
|
||||
control={control}
|
||||
render={(
|
||||
{ field: { value, onChange, ...rest } },
|
||||
) => (
|
||||
<Switch
|
||||
checked={value}
|
||||
onCheckedChange={(v) => {
|
||||
onChange(v);
|
||||
field.inputChange?.(v);
|
||||
}}
|
||||
id={field.name}
|
||||
disabled={disabled}
|
||||
{...field.properties}
|
||||
className={cn([
|
||||
field.properties?.className,
|
||||
isDirty
|
||||
? "focus:ring-sky-500 ring-sky-500 ring-2 ring-offset-2"
|
||||
: "",
|
||||
invalid
|
||||
? "focus:ring-red-500 ring-red-500 ring-2 ring-offset-2"
|
||||
: "",
|
||||
])}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { Label } from "@components/UI/Label.tsx";
|
||||
|
||||
export interface FieldWrapperProps {
|
||||
label: string;
|
||||
fieldName: string;
|
||||
description?: string;
|
||||
disabled?: boolean;
|
||||
children?: React.ReactNode;
|
||||
valid?: boolean;
|
||||
validationText?: string;
|
||||
}
|
||||
|
||||
export const FieldWrapper = ({
|
||||
label,
|
||||
fieldName,
|
||||
description,
|
||||
children,
|
||||
valid,
|
||||
validationText,
|
||||
}: FieldWrapperProps) => (
|
||||
<div className="pt-6 sm:pt-5">
|
||||
<fieldset aria-labelledby="label-notifications">
|
||||
{/* first column = labels/heading, second column = fields, third column = gutter */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[0.6fr_2fr_.1fr] sm:items-baseline gap-4">
|
||||
<Label htmlFor={fieldName}>{label}</Label>
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{description}
|
||||
</p>
|
||||
<p hidden={valid ?? true} className="text-sm text-red-500">
|
||||
{validationText}
|
||||
</p>
|
||||
<div className="mt-4 space-y-4 sm:col-span-2">
|
||||
<div className="flex items-center">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,64 @@
|
||||
import type { ZodType } from "zod/v4";
|
||||
import type {
|
||||
FieldError,
|
||||
FieldValues,
|
||||
Resolver,
|
||||
ResolverOptions,
|
||||
ResolverResult,
|
||||
} from "react-hook-form";
|
||||
|
||||
export function createZodResolver<T extends FieldValues>(
|
||||
schema: ZodType<T, unknown>,
|
||||
): Resolver<T, unknown> {
|
||||
return (
|
||||
values: T,
|
||||
_context: unknown,
|
||||
_options?: ResolverOptions<T>,
|
||||
): ResolverResult<T> => {
|
||||
const result = schema.safeParse(values);
|
||||
if (result.success) {
|
||||
return {
|
||||
values: result.data,
|
||||
errors: {},
|
||||
};
|
||||
}
|
||||
|
||||
const errors: Record<
|
||||
string,
|
||||
FieldError & { params?: Record<string, unknown> }
|
||||
> = {};
|
||||
|
||||
for (const issue of result.error.issues) {
|
||||
const { path, code, message, ...params } = issue;
|
||||
const key = path.join(".");
|
||||
|
||||
const suffix = "format" in params
|
||||
? params.format
|
||||
: "origin" in params
|
||||
? params.origin
|
||||
: "expected" in params
|
||||
? params.expected
|
||||
: "";
|
||||
|
||||
const newCode = code.replace(
|
||||
/_([a-z])/g,
|
||||
(_, char) => char.toUpperCase(),
|
||||
) + (suffix ? `.${suffix}` : "");
|
||||
|
||||
const fieldError: FieldError & { params?: Record<string, unknown> } = {
|
||||
type: newCode,
|
||||
message: message,
|
||||
...(Object.keys(params).length ? { params } : {}),
|
||||
};
|
||||
|
||||
if (!errors[key]) {
|
||||
errors[key] = fieldError;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
values: {} as T,
|
||||
errors,
|
||||
};
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user