NORY-47: create new dynamic-form component

dashboard/src/components/dynamic-form.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { FieldValues, Path, SubmitErrorHandler, SubmitHandler, UseFormReturn } from 'react-hook-form';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import React, { ReactNode } from 'react';
+import { Checkbox } from '@/components/ui/checkbox';
+import { KratosSchemaProperties } from '@/lib/forms/identity-form';
+
+interface DynamicFormProps<T extends FieldValues> {
+    children?: ReactNode,
+    form: UseFormReturn<T>,
+    properties: KratosSchemaProperties,
+    onValid: SubmitHandler<T>,
+    onInvalid: SubmitErrorHandler<T>,
+    submitLabel?: string,
+}
+
+export function DynamicForm<T extends FieldValues>(
+    {
+        children,
+        form,
+        properties,
+        onValid,
+        onInvalid,
+        submitLabel,
+    }: DynamicFormProps<T>,
+) {
+
+    const generateFormFields = (data: KratosSchemaProperties, prefix = '') => {
+        return (
+            <React.Fragment key={prefix}>
+                {
+                    data && Object.entries(data).map(([key, value]) => {
+
+                        const fullFieldName = prefix ? `${prefix}.${key}` : key;
+
+                        if (value.type === 'object') {
+
+                            return generateFormFields(value.properties!, fullFieldName);
+
+                        } else if (value.type === 'boolean') {
+
+                            return (
+                                <FormField
+                                    {...form.register(fullFieldName as Path<T>)}
+                                    key={fullFieldName}
+                                    render={({ field }) => (
+                                        <FormItem className="flex items-center space-x-2 space-y-0">
+                                            <Checkbox {...field} checked={field.value}/>
+                                            <FormLabel>{key}</FormLabel>
+                                        </FormItem>
+                                    )}
+                                />
+                            );
+
+                        } else {
+
+                            return (
+                                <FormField
+                                    {...form.register(fullFieldName as Path<T>)}
+                                    key={fullFieldName}
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>{value.title}</FormLabel>
+                                            <FormControl>
+                                                <Input placeholder={value.title} {...field} />
+                                            </FormControl>
+                                            <FormDescription>{value.description}</FormDescription>
+                                        </FormItem>
+                                    )}
+                                />
+                            );
+                        }
+                    })
+                }
+            </React.Fragment>
+        );
+    };
+
+    return (
+        <Form {...form}>
+            <form className="grid grid-cols-1 gap-2" onSubmit={form.handleSubmit(onValid, onInvalid)}>
+                {generateFormFields(properties)}
+                {children}
+                <Button
+                    key="submit"
+                    type="submit"
+                    disabled={!form.formState.isDirty}
+                >
+                    {submitLabel ?? 'Submit'}
+                </Button>
+            </form>
+        </Form>
+    );
+}
+
+export default DynamicForm;