Revert "feat: Implement new auto-form components and fields"
This reverts commit dc17e4a8f755ce045b461858ffcd56f567c5658f.
This commit is contained in:
parent
dfa443d373
commit
882729ffc9
GPG Key ID:
DD9E0666A747D126
@ -1,23 +0,0 @@
|
|||||||
import { FormLabel } from "@/components/ui/form";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
|
|
||||||
function AutoFormLabel({
|
|
||||||
label,
|
|
||||||
isRequired,
|
|
||||||
className,
|
|
||||||
}: {
|
|
||||||
label: string;
|
|
||||||
isRequired: boolean;
|
|
||||||
className?: string;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<FormLabel className={cn(className)}>
|
|
||||||
{label}
|
|
||||||
{isRequired && <span className="text-destructive"> *</span>}
|
|
||||||
</FormLabel>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AutoFormLabel;
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
function AutoFormTooltip({ fieldConfigItem }: { fieldConfigItem: any }) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{fieldConfigItem?.description && (
|
|
||||||
<p className="text-sm text-gray-500 dark:text-white">
|
|
||||||
{fieldConfigItem.description}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AutoFormTooltip;
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import AutoFormCheckbox from "./fields/checkbox";
|
|
||||||
import AutoFormDate from "./fields/date";
|
|
||||||
import AutoFormEnum from "./fields/enum";
|
|
||||||
import AutoFormFile from "./fields/file";
|
|
||||||
import AutoFormInput from "./fields/input";
|
|
||||||
import AutoFormNumber from "./fields/number";
|
|
||||||
import AutoFormRadioGroup from "./fields/radio-group";
|
|
||||||
import AutoFormSwitch from "./fields/switch";
|
|
||||||
import AutoFormTextarea from "./fields/textarea";
|
|
||||||
|
|
||||||
export const INPUT_COMPONENTS = {
|
|
||||||
checkbox: AutoFormCheckbox,
|
|
||||||
date: AutoFormDate,
|
|
||||||
select: AutoFormEnum,
|
|
||||||
radio: AutoFormRadioGroup,
|
|
||||||
switch: AutoFormSwitch,
|
|
||||||
textarea: AutoFormTextarea,
|
|
||||||
number: AutoFormNumber,
|
|
||||||
file: AutoFormFile,
|
|
||||||
fallback: AutoFormInput,
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Define handlers for specific Zod types.
|
|
||||||
* You can expand this object to support more types.
|
|
||||||
*/
|
|
||||||
export const DEFAULT_ZOD_HANDLERS: {
|
|
||||||
[key: string]: keyof typeof INPUT_COMPONENTS;
|
|
||||||
} = {
|
|
||||||
ZodBoolean: "checkbox",
|
|
||||||
ZodDate: "date",
|
|
||||||
ZodEnum: "select",
|
|
||||||
ZodNativeEnum: "select",
|
|
||||||
ZodNumber: "number",
|
|
||||||
};
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
import { FieldValues, UseFormWatch } from "react-hook-form";
|
|
||||||
import { Dependency, DependencyType, EnumValues } from "./types";
|
|
||||||
import * as z from "zod";
|
|
||||||
|
|
||||||
export default function resolveDependencies<
|
|
||||||
SchemaType extends z.infer<z.ZodObject<any, any>>,
|
|
||||||
>(
|
|
||||||
dependencies: Dependency<SchemaType>[],
|
|
||||||
currentFieldName: keyof SchemaType,
|
|
||||||
watch: UseFormWatch<FieldValues>,
|
|
||||||
) {
|
|
||||||
let isDisabled = false;
|
|
||||||
let isHidden = false;
|
|
||||||
let isRequired = false;
|
|
||||||
let overrideOptions: EnumValues | undefined;
|
|
||||||
|
|
||||||
const currentFieldValue = watch(currentFieldName as string);
|
|
||||||
|
|
||||||
const currentFieldDependencies = dependencies.filter(
|
|
||||||
(dependency) => dependency.targetField === currentFieldName,
|
|
||||||
);
|
|
||||||
for (const dependency of currentFieldDependencies) {
|
|
||||||
const watchedValue = watch(dependency.sourceField as string);
|
|
||||||
|
|
||||||
const conditionMet = dependency.when(watchedValue, currentFieldValue);
|
|
||||||
|
|
||||||
switch (dependency.type) {
|
|
||||||
case DependencyType.DISABLES:
|
|
||||||
if (conditionMet) {
|
|
||||||
isDisabled = true;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case DependencyType.REQUIRES:
|
|
||||||
if (conditionMet) {
|
|
||||||
isRequired = true;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case DependencyType.HIDES:
|
|
||||||
if (conditionMet) {
|
|
||||||
isHidden = true;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case DependencyType.SETS_OPTIONS:
|
|
||||||
if (conditionMet) {
|
|
||||||
overrideOptions = dependency.options;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
isDisabled,
|
|
||||||
isHidden,
|
|
||||||
isRequired,
|
|
||||||
overrideOptions,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
import {
|
|
||||||
AccordionContent,
|
|
||||||
AccordionItem,
|
|
||||||
AccordionTrigger,
|
|
||||||
} from "@/components/ui/accordion";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Separator } from "@/components/ui/separator";
|
|
||||||
import { Plus, Trash } from "lucide-react";
|
|
||||||
import { useFieldArray, useForm } from "react-hook-form";
|
|
||||||
import * as z from "zod";
|
|
||||||
import { beautifyObjectName } from "../utils";
|
|
||||||
import AutoFormObject from "./object";
|
|
||||||
|
|
||||||
function isZodArray(
|
|
||||||
item: z.ZodArray<any> | z.ZodDefault<any>,
|
|
||||||
): item is z.ZodArray<any> {
|
|
||||||
return item instanceof z.ZodArray;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isZodDefault(
|
|
||||||
item: z.ZodArray<any> | z.ZodDefault<any>,
|
|
||||||
): item is z.ZodDefault<any> {
|
|
||||||
return item instanceof z.ZodDefault;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function AutoFormArray({
|
|
||||||
name,
|
|
||||||
item,
|
|
||||||
form,
|
|
||||||
path = [],
|
|
||||||
fieldConfig,
|
|
||||||
}: {
|
|
||||||
name: string;
|
|
||||||
item: z.ZodArray<any> | z.ZodDefault<any>;
|
|
||||||
form: ReturnType<typeof useForm>;
|
|
||||||
path?: string[];
|
|
||||||
fieldConfig?: any;
|
|
||||||
}) {
|
|
||||||
const { fields, append, remove } = useFieldArray({
|
|
||||||
control: form.control,
|
|
||||||
name,
|
|
||||||
});
|
|
||||||
const title = item._def.description ?? beautifyObjectName(name);
|
|
||||||
|
|
||||||
const itemDefType = isZodArray(item)
|
|
||||||
? item._def.type
|
|
||||||
: isZodDefault(item)
|
|
||||||
? item._def.innerType._def.type
|
|
||||||
: null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AccordionItem value={name} className="border-none">
|
|
||||||
<AccordionTrigger>{title}</AccordionTrigger>
|
|
||||||
<AccordionContent>
|
|
||||||
{fields.map((_field, index) => {
|
|
||||||
const key = _field.id;
|
|
||||||
return (
|
|
||||||
<div className="mt-4 flex flex-col" key={`${key}`}>
|
|
||||||
<AutoFormObject
|
|
||||||
schema={itemDefType as z.ZodObject<any, any>}
|
|
||||||
form={form}
|
|
||||||
fieldConfig={fieldConfig}
|
|
||||||
path={[...path, index.toString()]}
|
|
||||||
/>
|
|
||||||
<div className="my-4 flex justify-end">
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
size="icon"
|
|
||||||
type="button"
|
|
||||||
className="hover:bg-zinc-300 hover:text-black focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-white dark:text-black dark:hover:bg-zinc-300 dark:hover:text-black dark:hover:ring-0 dark:hover:ring-offset-0 dark:focus-visible:ring-0 dark:focus-visible:ring-offset-0"
|
|
||||||
onClick={() => remove(index)}
|
|
||||||
>
|
|
||||||
<Trash className="size-4 " />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Separator />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="secondary"
|
|
||||||
onClick={() => append({})}
|
|
||||||
className="mt-4 flex items-center"
|
|
||||||
>
|
|
||||||
<Plus className="mr-2" size={16} />
|
|
||||||
Add
|
|
||||||
</Button>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
import { Checkbox } from "@/components/ui/checkbox";
|
|
||||||
import { FormControl, FormItem } from "@/components/ui/form";
|
|
||||||
import AutoFormTooltip from "../common/tooltip";
|
|
||||||
import { AutoFormInputComponentProps } from "../types";
|
|
||||||
import AutoFormLabel from "../common/label";
|
|
||||||
|
|
||||||
export default function AutoFormCheckbox({
|
|
||||||
label,
|
|
||||||
isRequired,
|
|
||||||
field,
|
|
||||||
fieldConfigItem,
|
|
||||||
fieldProps,
|
|
||||||
}: AutoFormInputComponentProps) {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<FormItem>
|
|
||||||
<div className="mb-3 flex items-center gap-3">
|
|
||||||
<FormControl>
|
|
||||||
<Checkbox
|
|
||||||
checked={field.value}
|
|
||||||
onCheckedChange={field.onChange}
|
|
||||||
{...fieldProps}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<AutoFormLabel
|
|
||||||
label={fieldConfigItem?.label || label}
|
|
||||||
isRequired={isRequired}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</FormItem>
|
|
||||||
<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import { DatePicker } from "@/components/ui/date-picker";
|
|
||||||
import { FormControl, FormItem, FormMessage } from "@/components/ui/form";
|
|
||||||
import AutoFormLabel from "../common/label";
|
|
||||||
import AutoFormTooltip from "../common/tooltip";
|
|
||||||
import { AutoFormInputComponentProps } from "../types";
|
|
||||||
|
|
||||||
export default function AutoFormDate({
|
|
||||||
label,
|
|
||||||
isRequired,
|
|
||||||
field,
|
|
||||||
fieldConfigItem,
|
|
||||||
fieldProps,
|
|
||||||
}: AutoFormInputComponentProps) {
|
|
||||||
return (
|
|
||||||
<FormItem>
|
|
||||||
<AutoFormLabel
|
|
||||||
label={fieldConfigItem?.label || label}
|
|
||||||
isRequired={isRequired}
|
|
||||||
/>
|
|
||||||
<FormControl>
|
|
||||||
<DatePicker
|
|
||||||
date={field.value}
|
|
||||||
setDate={field.onChange}
|
|
||||||
{...fieldProps}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
|
|
||||||
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
import { FormControl, FormItem, FormMessage } from "@/components/ui/form";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/components/ui/select";
|
|
||||||
import * as z from "zod";
|
|
||||||
import AutoFormLabel from "../common/label";
|
|
||||||
import AutoFormTooltip from "../common/tooltip";
|
|
||||||
import { AutoFormInputComponentProps } from "../types";
|
|
||||||
import { getBaseSchema } from "../utils";
|
|
||||||
|
|
||||||
export default function AutoFormEnum({
|
|
||||||
label,
|
|
||||||
isRequired,
|
|
||||||
field,
|
|
||||||
fieldConfigItem,
|
|
||||||
zodItem,
|
|
||||||
fieldProps,
|
|
||||||
}: AutoFormInputComponentProps) {
|
|
||||||
const baseValues = (getBaseSchema(zodItem) as unknown as z.ZodEnum<any>)._def
|
|
||||||
.values;
|
|
||||||
|
|
||||||
let values: [string, string][] = [];
|
|
||||||
if (!Array.isArray(baseValues)) {
|
|
||||||
values = Object.entries(baseValues);
|
|
||||||
} else {
|
|
||||||
values = baseValues.map((value) => [value, value]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function findItem(value: any) {
|
|
||||||
return values.find((item) => item[0] === value);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FormItem>
|
|
||||||
<AutoFormLabel
|
|
||||||
label={fieldConfigItem?.label || label}
|
|
||||||
isRequired={isRequired}
|
|
||||||
/>
|
|
||||||
<FormControl>
|
|
||||||
<Select
|
|
||||||
onValueChange={field.onChange}
|
|
||||||
defaultValue={field.value}
|
|
||||||
{...fieldProps}
|
|
||||||
>
|
|
||||||
<SelectTrigger className={fieldProps.className}>
|
|
||||||
<SelectValue placeholder={fieldConfigItem.inputProps?.placeholder}>
|
|
||||||
{field.value ? findItem(field.value)?.[1] : "Select an option"}
|
|
||||||
</SelectValue>
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{values.map(([value, label]) => (
|
|
||||||
<SelectItem value={label} key={value}>
|
|
||||||
{label}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
import { FormControl, FormItem, FormMessage } from "@/components/ui/form";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Trash2 } from "lucide-react";
|
|
||||||
import { ChangeEvent, useState } from "react";
|
|
||||||
import AutoFormLabel from "../common/label";
|
|
||||||
import AutoFormTooltip from "../common/tooltip";
|
|
||||||
import { AutoFormInputComponentProps } from "../types";
|
|
||||||
export default function AutoFormFile({
|
|
||||||
label,
|
|
||||||
isRequired,
|
|
||||||
fieldConfigItem,
|
|
||||||
fieldProps,
|
|
||||||
field,
|
|
||||||
}: AutoFormInputComponentProps) {
|
|
||||||
const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
|
|
||||||
const showLabel = _showLabel === undefined ? true : _showLabel;
|
|
||||||
const [file, setFile] = useState<string | null>(null);
|
|
||||||
const [fileName, setFileName] = useState<string | null>(null);
|
|
||||||
const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = e.target.files?.[0];
|
|
||||||
|
|
||||||
if (file) {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onloadend = () => {
|
|
||||||
setFile(reader.result as string);
|
|
||||||
setFileName(file.name);
|
|
||||||
field.onChange(reader.result as string);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRemoveClick = () => {
|
|
||||||
setFile(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FormItem>
|
|
||||||
{showLabel && (
|
|
||||||
<AutoFormLabel
|
|
||||||
label={fieldConfigItem?.label || label}
|
|
||||||
isRequired={isRequired}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{!file && (
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
type="file"
|
|
||||||
{...fieldPropsWithoutShowLabel}
|
|
||||||
onChange={handleFileChange}
|
|
||||||
value={""}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
{file && (
|
|
||||||
<div className="flex h-[40px] w-full flex-row items-center justify-between space-x-2 rounded-sm border p-2 text-black focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-white dark:text-black dark:focus-visible:ring-0 dark:focus-visible:ring-offset-0">
|
|
||||||
<p>{fileName}</p>
|
|
||||||
<button onClick={handleRemoveClick} aria-label="Remove image">
|
|
||||||
<Trash2 size={16} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
import { FormControl, FormItem, FormMessage } from "@/components/ui/form";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import AutoFormLabel from "../common/label";
|
|
||||||
import AutoFormTooltip from "../common/tooltip";
|
|
||||||
import { AutoFormInputComponentProps } from "../types";
|
|
||||||
|
|
||||||
export default function AutoFormInput({
|
|
||||||
label,
|
|
||||||
isRequired,
|
|
||||||
fieldConfigItem,
|
|
||||||
fieldProps,
|
|
||||||
}: AutoFormInputComponentProps) {
|
|
||||||
const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
|
|
||||||
const showLabel = _showLabel === undefined ? true : _showLabel;
|
|
||||||
const type = fieldProps.type || "text";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-row items-center space-x-2">
|
|
||||||
<FormItem className="flex w-full flex-col justify-start">
|
|
||||||
{showLabel && (
|
|
||||||
<AutoFormLabel
|
|
||||||
label={fieldConfigItem?.label || label}
|
|
||||||
isRequired={isRequired}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<FormControl>
|
|
||||||
<Input type={type} {...fieldPropsWithoutShowLabel} />
|
|
||||||
</FormControl>
|
|
||||||
<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
import { FormControl, FormItem, FormMessage } from "@/components/ui/form";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import AutoFormLabel from "../common/label";
|
|
||||||
import AutoFormTooltip from "../common/tooltip";
|
|
||||||
import { AutoFormInputComponentProps } from "../types";
|
|
||||||
|
|
||||||
export default function AutoFormNumber({
|
|
||||||
label,
|
|
||||||
isRequired,
|
|
||||||
fieldConfigItem,
|
|
||||||
fieldProps,
|
|
||||||
}: AutoFormInputComponentProps) {
|
|
||||||
const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
|
|
||||||
const showLabel = _showLabel === undefined ? true : _showLabel;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FormItem>
|
|
||||||
{showLabel && (
|
|
||||||
<AutoFormLabel
|
|
||||||
label={fieldConfigItem?.label || label}
|
|
||||||
isRequired={isRequired}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<FormControl>
|
|
||||||
<Input type="number" {...fieldPropsWithoutShowLabel} />
|
|
||||||
</FormControl>
|
|
||||||
<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,183 +0,0 @@
|
|||||||
import {
|
|
||||||
Accordion,
|
|
||||||
AccordionContent,
|
|
||||||
AccordionItem,
|
|
||||||
AccordionTrigger,
|
|
||||||
} from "@/components/ui/accordion";
|
|
||||||
import { FormField } from "@/components/ui/form";
|
|
||||||
import { useForm, useFormContext } from "react-hook-form";
|
|
||||||
import * as z from "zod";
|
|
||||||
import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from "../config";
|
|
||||||
import { Dependency, FieldConfig, FieldConfigItem } from "../types";
|
|
||||||
import {
|
|
||||||
beautifyObjectName,
|
|
||||||
getBaseSchema,
|
|
||||||
getBaseType,
|
|
||||||
zodToHtmlInputProps,
|
|
||||||
} from "../utils";
|
|
||||||
import AutoFormArray from "./array";
|
|
||||||
import resolveDependencies from "../dependencies";
|
|
||||||
|
|
||||||
function DefaultParent({ children }: { children: React.ReactNode }) {
|
|
||||||
return <>{children}</>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function AutoFormObject<
|
|
||||||
SchemaType extends z.ZodObject<any, any>,
|
|
||||||
>({
|
|
||||||
schema,
|
|
||||||
form,
|
|
||||||
fieldConfig,
|
|
||||||
path = [],
|
|
||||||
dependencies = [],
|
|
||||||
}: {
|
|
||||||
schema: SchemaType | z.ZodEffects<SchemaType>;
|
|
||||||
form: ReturnType<typeof useForm>;
|
|
||||||
fieldConfig?: FieldConfig<z.infer<SchemaType>>;
|
|
||||||
path?: string[];
|
|
||||||
dependencies?: Dependency<z.infer<SchemaType>>[];
|
|
||||||
}) {
|
|
||||||
const { watch } = useFormContext(); // Use useFormContext to access the watch function
|
|
||||||
|
|
||||||
if (!schema) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const { shape } = getBaseSchema<SchemaType>(schema) || {};
|
|
||||||
|
|
||||||
if (!shape) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleIfZodNumber = (item: z.ZodAny) => {
|
|
||||||
const isZodNumber = (item as any)._def.typeName === "ZodNumber";
|
|
||||||
const isInnerZodNumber =
|
|
||||||
(item._def as any).innerType?._def?.typeName === "ZodNumber";
|
|
||||||
|
|
||||||
if (isZodNumber) {
|
|
||||||
(item as any)._def.coerce = true;
|
|
||||||
} else if (isInnerZodNumber) {
|
|
||||||
(item._def as any).innerType._def.coerce = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return item;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Accordion type="multiple" className="space-y-5 border-none">
|
|
||||||
{Object.keys(shape).map((name) => {
|
|
||||||
let item = shape[name] as z.ZodAny;
|
|
||||||
item = handleIfZodNumber(item) as z.ZodAny;
|
|
||||||
const zodBaseType = getBaseType(item);
|
|
||||||
const itemName = item._def.description ?? beautifyObjectName(name);
|
|
||||||
const key = [...path, name].join(".");
|
|
||||||
|
|
||||||
const {
|
|
||||||
isHidden,
|
|
||||||
isDisabled,
|
|
||||||
isRequired: isRequiredByDependency,
|
|
||||||
overrideOptions,
|
|
||||||
} = resolveDependencies(dependencies, name, watch);
|
|
||||||
if (isHidden) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (zodBaseType === "ZodObject") {
|
|
||||||
return (
|
|
||||||
<AccordionItem value={name} key={key} className="border-none">
|
|
||||||
<AccordionTrigger>{itemName}</AccordionTrigger>
|
|
||||||
<AccordionContent className="p-2">
|
|
||||||
<AutoFormObject
|
|
||||||
schema={item as unknown as z.ZodObject<any, any>}
|
|
||||||
form={form}
|
|
||||||
fieldConfig={
|
|
||||||
(fieldConfig?.[name] ?? {}) as FieldConfig<
|
|
||||||
z.infer<typeof item>
|
|
||||||
>
|
|
||||||
}
|
|
||||||
path={[...path, name]}
|
|
||||||
/>
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (zodBaseType === "ZodArray") {
|
|
||||||
return (
|
|
||||||
<AutoFormArray
|
|
||||||
key={key}
|
|
||||||
name={name}
|
|
||||||
item={item as unknown as z.ZodArray<any>}
|
|
||||||
form={form}
|
|
||||||
fieldConfig={fieldConfig?.[name] ?? {}}
|
|
||||||
path={[...path, name]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const fieldConfigItem: FieldConfigItem = fieldConfig?.[name] ?? {};
|
|
||||||
const zodInputProps = zodToHtmlInputProps(item);
|
|
||||||
const isRequired =
|
|
||||||
isRequiredByDependency ||
|
|
||||||
zodInputProps.required ||
|
|
||||||
fieldConfigItem.inputProps?.required ||
|
|
||||||
false;
|
|
||||||
|
|
||||||
if (overrideOptions) {
|
|
||||||
item = z.enum(overrideOptions) as unknown as z.ZodAny;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name={key}
|
|
||||||
key={key}
|
|
||||||
render={({ field }) => {
|
|
||||||
const inputType =
|
|
||||||
fieldConfigItem.fieldType ??
|
|
||||||
DEFAULT_ZOD_HANDLERS[zodBaseType] ??
|
|
||||||
"fallback";
|
|
||||||
|
|
||||||
const InputComponent =
|
|
||||||
typeof inputType === "function"
|
|
||||||
? inputType
|
|
||||||
: INPUT_COMPONENTS[inputType];
|
|
||||||
|
|
||||||
const ParentElement =
|
|
||||||
fieldConfigItem.renderParent ?? DefaultParent;
|
|
||||||
|
|
||||||
const defaultValue = fieldConfigItem.inputProps?.defaultValue;
|
|
||||||
const value = field.value ?? defaultValue ?? "";
|
|
||||||
|
|
||||||
const fieldProps = {
|
|
||||||
...zodToHtmlInputProps(item),
|
|
||||||
...field,
|
|
||||||
...fieldConfigItem.inputProps,
|
|
||||||
disabled: fieldConfigItem.inputProps?.disabled || isDisabled,
|
|
||||||
ref: undefined,
|
|
||||||
value: value,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (InputComponent === undefined) {
|
|
||||||
return <></>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ParentElement key={`${key}.parent`}>
|
|
||||||
<InputComponent
|
|
||||||
zodInputProps={zodInputProps}
|
|
||||||
field={field}
|
|
||||||
fieldConfigItem={fieldConfigItem}
|
|
||||||
label={itemName}
|
|
||||||
isRequired={isRequired}
|
|
||||||
zodItem={item}
|
|
||||||
fieldProps={fieldProps}
|
|
||||||
className={fieldProps.className}
|
|
||||||
/>
|
|
||||||
</ParentElement>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Accordion>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
import {
|
|
||||||
FormControl,
|
|
||||||
FormItem,
|
|
||||||
FormLabel,
|
|
||||||
FormMessage,
|
|
||||||
} from "@/components/ui/form";
|
|
||||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
||||||
import * as z from "zod";
|
|
||||||
import AutoFormLabel from "../common/label";
|
|
||||||
import AutoFormTooltip from "../common/tooltip";
|
|
||||||
import { AutoFormInputComponentProps } from "../types";
|
|
||||||
import { getBaseSchema } from "../utils";
|
|
||||||
|
|
||||||
export default function AutoFormRadioGroup({
|
|
||||||
label,
|
|
||||||
isRequired,
|
|
||||||
field,
|
|
||||||
zodItem,
|
|
||||||
fieldProps,
|
|
||||||
fieldConfigItem,
|
|
||||||
}: AutoFormInputComponentProps) {
|
|
||||||
const baseValues = (getBaseSchema(zodItem) as unknown as z.ZodEnum<any>)._def
|
|
||||||
.values;
|
|
||||||
|
|
||||||
let values: string[] = [];
|
|
||||||
if (!Array.isArray(baseValues)) {
|
|
||||||
values = Object.entries(baseValues).map((item) => item[0]);
|
|
||||||
} else {
|
|
||||||
values = baseValues;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<FormItem>
|
|
||||||
<AutoFormLabel
|
|
||||||
label={fieldConfigItem?.label || label}
|
|
||||||
isRequired={isRequired}
|
|
||||||
/>
|
|
||||||
<FormControl>
|
|
||||||
<RadioGroup
|
|
||||||
onValueChange={field.onChange}
|
|
||||||
defaultValue={field.value}
|
|
||||||
{...fieldProps}
|
|
||||||
>
|
|
||||||
{values?.map((value: any) => (
|
|
||||||
<FormItem
|
|
||||||
key={value}
|
|
||||||
className="mb-2 flex items-center gap-3 space-y-0"
|
|
||||||
>
|
|
||||||
<FormControl>
|
|
||||||
<RadioGroupItem value={value} />
|
|
||||||
</FormControl>
|
|
||||||
<FormLabel className="font-normal">{value}</FormLabel>
|
|
||||||
</FormItem>
|
|
||||||
))}
|
|
||||||
</RadioGroup>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
import { FormControl, FormItem } from "@/components/ui/form";
|
|
||||||
import { Switch } from "@/components/ui/switch";
|
|
||||||
import AutoFormLabel from "../common/label";
|
|
||||||
import AutoFormTooltip from "../common/tooltip";
|
|
||||||
import { AutoFormInputComponentProps } from "../types";
|
|
||||||
|
|
||||||
export default function AutoFormSwitch({
|
|
||||||
label,
|
|
||||||
isRequired,
|
|
||||||
field,
|
|
||||||
fieldConfigItem,
|
|
||||||
fieldProps,
|
|
||||||
}: AutoFormInputComponentProps) {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<FormItem>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<FormControl>
|
|
||||||
<Switch
|
|
||||||
checked={field.value}
|
|
||||||
onCheckedChange={field.onChange}
|
|
||||||
{...fieldProps}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<AutoFormLabel
|
|
||||||
label={fieldConfigItem?.label || label}
|
|
||||||
isRequired={isRequired}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</FormItem>
|
|
||||||
<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
import { FormControl, FormItem, FormMessage } from "@/components/ui/form";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
import AutoFormLabel from "../common/label";
|
|
||||||
import AutoFormTooltip from "../common/tooltip";
|
|
||||||
import { AutoFormInputComponentProps } from "../types";
|
|
||||||
|
|
||||||
export default function AutoFormTextarea({
|
|
||||||
label,
|
|
||||||
isRequired,
|
|
||||||
fieldConfigItem,
|
|
||||||
fieldProps,
|
|
||||||
}: AutoFormInputComponentProps) {
|
|
||||||
const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
|
|
||||||
const showLabel = _showLabel === undefined ? true : _showLabel;
|
|
||||||
return (
|
|
||||||
<FormItem>
|
|
||||||
{showLabel && (
|
|
||||||
<AutoFormLabel
|
|
||||||
label={fieldConfigItem?.label || label}
|
|
||||||
isRequired={isRequired}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<FormControl>
|
|
||||||
<Textarea {...fieldPropsWithoutShowLabel} />
|
|
||||||
</FormControl>
|
|
||||||
<AutoFormTooltip fieldConfigItem={fieldConfigItem} />
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
"use client";
|
|
||||||
import { Form } from "@/components/ui/form";
|
|
||||||
import React from "react";
|
|
||||||
import { DefaultValues, FormState, useForm } from "react-hook-form";
|
|
||||||
import { z } from "zod";
|
|
||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
|
|
||||||
import AutoFormObject from "./fields/object";
|
|
||||||
import { Dependency, FieldConfig } from "./types";
|
|
||||||
import {
|
|
||||||
ZodObjectOrWrapped,
|
|
||||||
getDefaultValues,
|
|
||||||
getObjectFormSchema,
|
|
||||||
} from "./utils";
|
|
||||||
|
|
||||||
export function AutoFormSubmit({
|
|
||||||
children,
|
|
||||||
className,
|
|
||||||
disabled,
|
|
||||||
}: {
|
|
||||||
children?: React.ReactNode;
|
|
||||||
className?: string;
|
|
||||||
disabled?: boolean;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<Button type="submit" disabled={disabled} className={className}>
|
|
||||||
{children ?? "Submit"}
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function AutoForm<SchemaType extends ZodObjectOrWrapped>({
|
|
||||||
formSchema,
|
|
||||||
values: valuesProp,
|
|
||||||
onValuesChange: onValuesChangeProp,
|
|
||||||
onParsedValuesChange,
|
|
||||||
onSubmit: onSubmitProp,
|
|
||||||
fieldConfig,
|
|
||||||
children,
|
|
||||||
className,
|
|
||||||
dependencies,
|
|
||||||
}: {
|
|
||||||
formSchema: SchemaType;
|
|
||||||
values?: Partial<z.infer<SchemaType>>;
|
|
||||||
onValuesChange?: (values: Partial<z.infer<SchemaType>>) => void;
|
|
||||||
onParsedValuesChange?: (values: Partial<z.infer<SchemaType>>) => void;
|
|
||||||
onSubmit?: (values: z.infer<SchemaType>) => void;
|
|
||||||
fieldConfig?: FieldConfig<z.infer<SchemaType>>;
|
|
||||||
children?:
|
|
||||||
| React.ReactNode
|
|
||||||
| ((formState: FormState<z.infer<SchemaType>>) => React.ReactNode);
|
|
||||||
className?: string;
|
|
||||||
dependencies?: Dependency<z.infer<SchemaType>>[];
|
|
||||||
}) {
|
|
||||||
const objectFormSchema = getObjectFormSchema(formSchema);
|
|
||||||
const defaultValues: DefaultValues<z.infer<typeof objectFormSchema>> | null =
|
|
||||||
getDefaultValues(objectFormSchema, fieldConfig);
|
|
||||||
|
|
||||||
const form = useForm<z.infer<typeof objectFormSchema>>({
|
|
||||||
resolver: zodResolver(formSchema),
|
|
||||||
defaultValues: defaultValues ?? undefined,
|
|
||||||
values: valuesProp,
|
|
||||||
});
|
|
||||||
|
|
||||||
function onSubmit(values: z.infer<typeof formSchema>) {
|
|
||||||
const parsedValues = formSchema.safeParse(values);
|
|
||||||
if (parsedValues.success) {
|
|
||||||
onSubmitProp?.(parsedValues.data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const values = form.watch();
|
|
||||||
// valuesString is needed because form.watch() returns a new object every time
|
|
||||||
const valuesString = JSON.stringify(values);
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
onValuesChangeProp?.(values);
|
|
||||||
const parsedValues = formSchema.safeParse(values);
|
|
||||||
if (parsedValues.success) {
|
|
||||||
onParsedValuesChange?.(parsedValues.data);
|
|
||||||
}
|
|
||||||
}, [valuesString]);
|
|
||||||
|
|
||||||
const renderChildren =
|
|
||||||
typeof children === "function"
|
|
||||||
? children(form.formState as FormState<z.infer<SchemaType>>)
|
|
||||||
: children;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full">
|
|
||||||
<Form {...form}>
|
|
||||||
<form
|
|
||||||
onSubmit={(e) => {
|
|
||||||
form.handleSubmit(onSubmit)(e);
|
|
||||||
}}
|
|
||||||
className={cn("space-y-5", className)}
|
|
||||||
>
|
|
||||||
<AutoFormObject
|
|
||||||
schema={objectFormSchema}
|
|
||||||
form={form}
|
|
||||||
dependencies={dependencies}
|
|
||||||
fieldConfig={fieldConfig}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{renderChildren}
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AutoForm;
|
|
||||||
@ -1,244 +0,0 @@
|
|||||||
import { z } from "zod";
|
|
||||||
import AutoForm from "../index";
|
|
||||||
|
|
||||||
describe("<AutoForm />", () => {
|
|
||||||
it("renders fields", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
username: z.string().min(2, {
|
|
||||||
message: "Username must be at least 2 characters.",
|
|
||||||
}),
|
|
||||||
|
|
||||||
password: z.string().describe("Your secure password").min(8, {
|
|
||||||
message: "Password must be at least 8 characters.",
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(<AutoForm formSchema={formSchema} />);
|
|
||||||
cy.get("input[name=username]").should("exist");
|
|
||||||
cy.get("input[name=password]").should("exist");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("renders fields with custom labels", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
username: z.string().describe("Your username"),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(<AutoForm formSchema={formSchema} />);
|
|
||||||
|
|
||||||
cy.get("label").contains("Your username");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("generates default labels", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
someFieldName: z.string(),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(<AutoForm formSchema={formSchema} />);
|
|
||||||
|
|
||||||
cy.get("label").contains("Some Field Name");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("allows setting custom field labels", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
someFieldName: z.string(),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(
|
|
||||||
<AutoForm
|
|
||||||
fieldConfig={{
|
|
||||||
someFieldName: {
|
|
||||||
label: "My field name",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
formSchema={formSchema}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
cy.get("label").contains("My field name");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("allows setting custom field props", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
username: z.string(),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(
|
|
||||||
<AutoForm
|
|
||||||
formSchema={formSchema}
|
|
||||||
fieldConfig={{
|
|
||||||
username: {
|
|
||||||
inputProps: {
|
|
||||||
placeholder: "Enter your username",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
cy.get("input[name=username]").should(
|
|
||||||
"have.attr",
|
|
||||||
"placeholder",
|
|
||||||
"Enter your username",
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("allows setting custom field type", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
username: z.string(),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(
|
|
||||||
<AutoForm
|
|
||||||
formSchema={formSchema}
|
|
||||||
fieldConfig={{
|
|
||||||
username: {
|
|
||||||
fieldType: "number",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
cy.get("input").should("have.attr", "type", "number");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("can submit valid forms", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
username: z.string(),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(
|
|
||||||
<AutoForm
|
|
||||||
formSchema={formSchema}
|
|
||||||
onSubmit={(values) => {
|
|
||||||
expect(values).to.deep.equal({
|
|
||||||
username: "john",
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button type="submit">Submit</button>
|
|
||||||
</AutoForm>,
|
|
||||||
);
|
|
||||||
|
|
||||||
cy.get("input[name=username]").type("john");
|
|
||||||
cy.get("button[type=submit]").click();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("shows error for invalid forms", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
username: z.string(),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(
|
|
||||||
<AutoForm
|
|
||||||
formSchema={formSchema}
|
|
||||||
onSubmit={() => {
|
|
||||||
expect.fail("Should not be called.");
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button type="submit">Submit</button>
|
|
||||||
</AutoForm>,
|
|
||||||
);
|
|
||||||
|
|
||||||
cy.get("button[type=submit]").click();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("can set default values", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
username: z.string().default("john"),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(<AutoForm formSchema={formSchema} />);
|
|
||||||
|
|
||||||
cy.get("input[name=username]").should("have.value", "john");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("can submit with default values", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
username: z.string().default("john"),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(
|
|
||||||
<AutoForm
|
|
||||||
formSchema={formSchema}
|
|
||||||
onSubmit={(values) => {
|
|
||||||
expect(values).to.deep.equal({
|
|
||||||
username: "john",
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button type="submit">Submit</button>
|
|
||||||
</AutoForm>,
|
|
||||||
);
|
|
||||||
|
|
||||||
cy.get("button[type=submit]").click();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("can set and submit optional values", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
username: z.string().optional(),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(
|
|
||||||
<AutoForm
|
|
||||||
formSchema={formSchema}
|
|
||||||
onSubmit={(values) => {
|
|
||||||
expect(values).to.deep.equal({
|
|
||||||
username: undefined,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button type="submit">Submit</button>
|
|
||||||
</AutoForm>,
|
|
||||||
);
|
|
||||||
|
|
||||||
cy.get("input[name=username]").should("have.value", "");
|
|
||||||
cy.get("button[type=submit]").click();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("can add description", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
username: z.string(),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(
|
|
||||||
<AutoForm
|
|
||||||
formSchema={formSchema}
|
|
||||||
fieldConfig={{
|
|
||||||
username: {
|
|
||||||
description: "Your username here",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
cy.get("p").contains("Your username here");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("can set default values on array", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
arr: z.array(z.object({ name: z.string(), age: z.number() })).default([
|
|
||||||
{ name: "Haykal", age: 21 },
|
|
||||||
{ name: "John", age: 20 },
|
|
||||||
]),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(<AutoForm formSchema={formSchema} />);
|
|
||||||
|
|
||||||
//get button with text Arr
|
|
||||||
cy.get("button").contains("Arr").click();
|
|
||||||
cy.get("input[name='arr.0.name']").should("have.value", "Haykal");
|
|
||||||
cy.get("input[name='arr.0.age']").should("have.value", "21");
|
|
||||||
cy.get("input[name='arr.1.name']").should("have.value", "John");
|
|
||||||
cy.get("input[name='arr.1.age']").should("have.value", "20");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("can set default value of number to 0", () => {
|
|
||||||
const formSchema = z.object({
|
|
||||||
number: z.number().default(0),
|
|
||||||
});
|
|
||||||
|
|
||||||
cy.mount(<AutoForm formSchema={formSchema} />);
|
|
||||||
|
|
||||||
cy.get("input[name='number']").should("have.value", "0");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
import { ControllerRenderProps, FieldValues } from "react-hook-form";
|
|
||||||
import * as z from "zod";
|
|
||||||
import { INPUT_COMPONENTS } from "./config";
|
|
||||||
|
|
||||||
export type FieldConfigItem = {
|
|
||||||
description?: React.ReactNode;
|
|
||||||
inputProps?: React.InputHTMLAttributes<HTMLInputElement> & {
|
|
||||||
showLabel?: boolean;
|
|
||||||
};
|
|
||||||
label?: string;
|
|
||||||
fieldType?:
|
|
||||||
| keyof typeof INPUT_COMPONENTS
|
|
||||||
| React.FC<AutoFormInputComponentProps>;
|
|
||||||
|
|
||||||
renderParent?: (props: {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}) => React.ReactElement | null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type FieldConfig<SchemaType extends z.infer<z.ZodObject<any, any>>> = {
|
|
||||||
// If SchemaType.key is an object, create a nested FieldConfig, otherwise FieldConfigItem
|
|
||||||
[Key in keyof SchemaType]?: SchemaType[Key] extends object
|
|
||||||
? FieldConfig<z.infer<SchemaType[Key]>>
|
|
||||||
: FieldConfigItem;
|
|
||||||
};
|
|
||||||
|
|
||||||
export enum DependencyType {
|
|
||||||
DISABLES,
|
|
||||||
REQUIRES,
|
|
||||||
HIDES,
|
|
||||||
SETS_OPTIONS,
|
|
||||||
}
|
|
||||||
|
|
||||||
type BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> = {
|
|
||||||
sourceField: keyof SchemaType;
|
|
||||||
type: DependencyType;
|
|
||||||
targetField: keyof SchemaType;
|
|
||||||
when: (sourceFieldValue: any, targetFieldValue: any) => boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
|
|
||||||
BaseDependency<SchemaType> & {
|
|
||||||
type:
|
|
||||||
| DependencyType.DISABLES
|
|
||||||
| DependencyType.REQUIRES
|
|
||||||
| DependencyType.HIDES;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type EnumValues = readonly [string, ...string[]];
|
|
||||||
|
|
||||||
export type OptionsDependency<
|
|
||||||
SchemaType extends z.infer<z.ZodObject<any, any>>,
|
|
||||||
> = BaseDependency<SchemaType> & {
|
|
||||||
type: DependencyType.SETS_OPTIONS;
|
|
||||||
|
|
||||||
// Partial array of values from sourceField that will trigger the dependency
|
|
||||||
options: EnumValues;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type Dependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
|
|
||||||
| ValueDependency<SchemaType>
|
|
||||||
| OptionsDependency<SchemaType>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A FormInput component can handle a specific Zod type (e.g. "ZodBoolean")
|
|
||||||
*/
|
|
||||||
export type AutoFormInputComponentProps = {
|
|
||||||
zodInputProps: React.InputHTMLAttributes<HTMLInputElement>;
|
|
||||||
field: ControllerRenderProps<FieldValues, any>;
|
|
||||||
fieldConfigItem: FieldConfigItem;
|
|
||||||
label: string;
|
|
||||||
isRequired: boolean;
|
|
||||||
fieldProps: any;
|
|
||||||
zodItem: z.ZodAny;
|
|
||||||
className?: string;
|
|
||||||
};
|
|
||||||
@ -1,180 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { DefaultValues } from "react-hook-form";
|
|
||||||
import { z } from "zod";
|
|
||||||
import { FieldConfig } from "./types";
|
|
||||||
|
|
||||||
// TODO: This should support recursive ZodEffects but TypeScript doesn't allow circular type definitions.
|
|
||||||
export type ZodObjectOrWrapped =
|
|
||||||
| z.ZodObject<any, any>
|
|
||||||
| z.ZodEffects<z.ZodObject<any, any>>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Beautify a camelCase string.
|
|
||||||
* e.g. "myString" -> "My String"
|
|
||||||
*/
|
|
||||||
export function beautifyObjectName(string: string) {
|
|
||||||
// if numbers only return the string
|
|
||||||
let output = string.replace(/([A-Z])/g, " $1");
|
|
||||||
output = output.charAt(0).toUpperCase() + output.slice(1);
|
|
||||||
return output;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the lowest level Zod type.
|
|
||||||
* This will unpack optionals, refinements, etc.
|
|
||||||
*/
|
|
||||||
export function getBaseSchema<
|
|
||||||
ChildType extends z.ZodAny | z.AnyZodObject = z.ZodAny,
|
|
||||||
>(schema: ChildType | z.ZodEffects<ChildType>): ChildType | null {
|
|
||||||
if (!schema) return null;
|
|
||||||
if ("innerType" in schema._def) {
|
|
||||||
return getBaseSchema(schema._def.innerType as ChildType);
|
|
||||||
}
|
|
||||||
if ("schema" in schema._def) {
|
|
||||||
return getBaseSchema(schema._def.schema as ChildType);
|
|
||||||
}
|
|
||||||
|
|
||||||
return schema as ChildType;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the type name of the lowest level Zod type.
|
|
||||||
* This will unpack optionals, refinements, etc.
|
|
||||||
*/
|
|
||||||
export function getBaseType(schema: z.ZodAny): string {
|
|
||||||
const baseSchema = getBaseSchema(schema);
|
|
||||||
return baseSchema ? baseSchema._def.typeName : "";
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Search for a "ZodDefult" in the Zod stack and return its value.
|
|
||||||
*/
|
|
||||||
export function getDefaultValueInZodStack(schema: z.ZodAny): any {
|
|
||||||
const typedSchema = schema as unknown as z.ZodDefault<
|
|
||||||
z.ZodNumber | z.ZodString
|
|
||||||
>;
|
|
||||||
|
|
||||||
if (typedSchema._def.typeName === "ZodDefault") {
|
|
||||||
return typedSchema._def.defaultValue();
|
|
||||||
}
|
|
||||||
|
|
||||||
if ("innerType" in typedSchema._def) {
|
|
||||||
return getDefaultValueInZodStack(
|
|
||||||
typedSchema._def.innerType as unknown as z.ZodAny,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if ("schema" in typedSchema._def) {
|
|
||||||
return getDefaultValueInZodStack(
|
|
||||||
(typedSchema._def as any).schema as z.ZodAny,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get all default values from a Zod schema.
|
|
||||||
*/
|
|
||||||
export function getDefaultValues<Schema extends z.ZodObject<any, any>>(
|
|
||||||
schema: Schema,
|
|
||||||
fieldConfig?: FieldConfig<z.infer<Schema>>,
|
|
||||||
) {
|
|
||||||
if (!schema) return null;
|
|
||||||
const { shape } = schema;
|
|
||||||
type DefaultValuesType = DefaultValues<Partial<z.infer<Schema>>>;
|
|
||||||
const defaultValues = {} as DefaultValuesType;
|
|
||||||
if (!shape) return defaultValues;
|
|
||||||
|
|
||||||
for (const key of Object.keys(shape)) {
|
|
||||||
const item = shape[key] as z.ZodAny;
|
|
||||||
|
|
||||||
if (getBaseType(item) === "ZodObject") {
|
|
||||||
const defaultItems = getDefaultValues(
|
|
||||||
getBaseSchema(item) as unknown as z.ZodObject<any, any>,
|
|
||||||
fieldConfig?.[key] as FieldConfig<z.infer<Schema>>,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (defaultItems !== null) {
|
|
||||||
for (const defaultItemKey of Object.keys(defaultItems)) {
|
|
||||||
const pathKey = `${key}.${defaultItemKey}` as keyof DefaultValuesType;
|
|
||||||
defaultValues[pathKey] = defaultItems[defaultItemKey];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
let defaultValue = getDefaultValueInZodStack(item);
|
|
||||||
if (
|
|
||||||
(defaultValue === null || defaultValue === "") &&
|
|
||||||
fieldConfig?.[key]?.inputProps
|
|
||||||
) {
|
|
||||||
defaultValue = (fieldConfig?.[key]?.inputProps as unknown as any)
|
|
||||||
.defaultValue;
|
|
||||||
}
|
|
||||||
if (defaultValue !== undefined) {
|
|
||||||
defaultValues[key as keyof DefaultValuesType] = defaultValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return defaultValues;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getObjectFormSchema(
|
|
||||||
schema: ZodObjectOrWrapped,
|
|
||||||
): z.ZodObject<any, any> {
|
|
||||||
if (schema?._def.typeName === "ZodEffects") {
|
|
||||||
const typedSchema = schema as z.ZodEffects<z.ZodObject<any, any>>;
|
|
||||||
return getObjectFormSchema(typedSchema._def.schema);
|
|
||||||
}
|
|
||||||
return schema as z.ZodObject<any, any>;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Convert a Zod schema to HTML input props to give direct feedback to the user.
|
|
||||||
* Once submitted, the schema will be validated completely.
|
|
||||||
*/
|
|
||||||
export function zodToHtmlInputProps(
|
|
||||||
schema:
|
|
||||||
| z.ZodNumber
|
|
||||||
| z.ZodString
|
|
||||||
| z.ZodOptional<z.ZodNumber | z.ZodString>
|
|
||||||
| any,
|
|
||||||
): React.InputHTMLAttributes<HTMLInputElement> {
|
|
||||||
if (["ZodOptional", "ZodNullable"].includes(schema._def.typeName)) {
|
|
||||||
const typedSchema = schema as z.ZodOptional<z.ZodNumber | z.ZodString>;
|
|
||||||
return {
|
|
||||||
...zodToHtmlInputProps(typedSchema._def.innerType),
|
|
||||||
required: false,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const typedSchema = schema as z.ZodNumber | z.ZodString;
|
|
||||||
|
|
||||||
if (!("checks" in typedSchema._def))
|
|
||||||
return {
|
|
||||||
required: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
const { checks } = typedSchema._def;
|
|
||||||
const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
|
|
||||||
required: true,
|
|
||||||
};
|
|
||||||
const type = getBaseType(schema);
|
|
||||||
|
|
||||||
for (const check of checks) {
|
|
||||||
if (check.kind === "min") {
|
|
||||||
if (type === "ZodString") {
|
|
||||||
inputProps.minLength = check.value;
|
|
||||||
} else {
|
|
||||||
inputProps.min = check.value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (check.kind === "max") {
|
|
||||||
if (type === "ZodString") {
|
|
||||||
inputProps.maxLength = check.value;
|
|
||||||
} else {
|
|
||||||
inputProps.max = check.value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return inputProps;
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
"use client";
|
|
||||||
import { format } from "date-fns";
|
|
||||||
import { Calendar as CalendarIcon } from "lucide-react";
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Calendar } from "@/components/ui/calendar";
|
|
||||||
import {
|
|
||||||
Popover,
|
|
||||||
PopoverContent,
|
|
||||||
PopoverTrigger,
|
|
||||||
} from "@/components/ui/popover";
|
|
||||||
import { forwardRef } from "react";
|
|
||||||
|
|
||||||
export const DatePicker = forwardRef<
|
|
||||||
HTMLDivElement,
|
|
||||||
{
|
|
||||||
date?: Date;
|
|
||||||
setDate: (date?: Date) => void;
|
|
||||||
}
|
|
||||||
>(function DatePickerCmp({ date, setDate }, ref) {
|
|
||||||
return (
|
|
||||||
<Popover>
|
|
||||||
<PopoverTrigger asChild>
|
|
||||||
<Button
|
|
||||||
variant={"outline"}
|
|
||||||
className={cn(
|
|
||||||
"w-full justify-start text-left font-normal",
|
|
||||||
!date && "text-muted-foreground",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
|
||||||
{date ? format(date, "PPP") : <span>Pick a date</span>}
|
|
||||||
</Button>
|
|
||||||
</PopoverTrigger>
|
|
||||||
<PopoverContent className="w-auto p-0" ref={ref}>
|
|
||||||
<Calendar
|
|
||||||
mode="single"
|
|
||||||
selected={date}
|
|
||||||
onSelect={setDate}
|
|
||||||
initialFocus
|
|
||||||
/>
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
Loading…
x
Reference in New Issue
Block a user