feat: added initial parsing of schema

package.json

@@ -16,6 +16,7 @@
     "lucide-react": "^0.367.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.3",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7"
   },

src/App.tsx

@@ -1,10 +1,34 @@
+import { useForm } from "react-hook-form";
 import InputField from "./components/fields/InputField";
+import personalInfoSchema from "./schemas/personal_info.json";
 
 function App() {
+	console.log({ personalInfoSchema });
+	const schema = personalInfoSchema;
+	const { register, handleSubmit } = useForm();
+
+	const onSubmit = (data) => {
+		console.log("form Data = ", data);
+	};
+
 	return (
 		<div className="container mx-auto flex flex-col items-center">
 			<h1 className="text-4xl font-bold tracking-tight mb-5">JSON to Form</h1>
-			<InputField type="text" labelText="First Name" htmlFor="firstName" />
+
+			<form onSubmit={handleSubmit(onSubmit)}>
+				{/* TODO(Keyur): Make the below logic recursive*/}
+				{schema &&
+					schema.fields.map((field) => (
+						<InputField
+							key={`key-${field.accessorKey}`}
+							register={register}
+							labelText={field.fieldName}
+							htmlFor={field.accessorKey}
+							type={field.type}
+						/>
+					))}
+				<input type="submit" />
+			</form>
 		</div>
 	);
 }

src/components/fields/InputField.tsx

@@ -1,18 +1,21 @@
+import { UseFormRegister } from "react-hook-form";
 import { Input, InputProps } from "../ui/input";
 import { Label } from "../ui/label";
+import { FieldType } from "@/interfaces/field";
 
 interface InputFieldProps extends InputProps {
 	labelText: string;
 	htmlFor: string;
+	register: UseFormRegister<any>;
 }
 
 const InputField = (props: InputFieldProps) => {
-	const { htmlFor, labelText, ...rest } = props;
+	const { htmlFor, register, labelText, ...rest } = props;
 	return (
 		<>
 			<div className="flex flex-col space-y-2">
 				<Label htmlFor={htmlFor}>{labelText}</Label>
-				<Input id="htmlFor" {...rest} />
+				<Input id="htmlFor" {...rest} {...register(htmlFor)} />
 			</div>
 		</>
 	);

src/components/ui/input.tsx

@@ -1,25 +1,25 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+	extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
+	({ className, type, ...props }, ref) => {
+		return (
+			<input
+				type={type}
+				className={cn(
+					"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+					className
+				)}
+				ref={ref}
+				{...props}
+			/>
+		);
+	}
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };

src/schemas/personal_info.json

@@ -0,0 +1,23 @@
+{
+    "type": "group",
+    "fields": [
+        {
+            "type": "field",
+            "dataType": "text",
+            "fieldName": "First Name",
+            "accessorKey": "firstName"
+        },
+        {
+            "type": "field",
+            "dataType": "text",
+            "fieldName": "Last Name",
+            "accessorKey": "lastName"
+        },
+        {
+            "type": "field",
+            "dataType": "number",
+            "fieldName": "Mobile Number",
+            "accessorKey": "mobNo"
+        }
+    ]
+}

yarn.lock

@@ -1834,6 +1834,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-hook-form@^7.51.3:
+  version "7.51.3"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.3.tgz#7486dd2d52280b6b28048c099a98d2545931cab3"
+  integrity sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==
+
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"