feat: views template created (#439)

apps/app/components/views/form.tsx

@@ -0,0 +1,101 @@
+import { useEffect } from "react";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// ui
+import { Button, Input, TextArea } from "components/ui";
+// types
+import { IView } from "types";
+
+type Props = {
+  handleFormSubmit: (values: IView) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  data?: IView;
+};
+
+const defaultValues: Partial<IView> = {
+  name: "",
+  description: "",
+};
+
+export const ViewForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<IView>({
+    defaultValues,
+  });
+
+  const handleCreateUpdateView = async (formData: IView) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateView)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-gray-900">
+          {status ? "Update" : "Create"} View
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <Input
+              id="name"
+              label="Name"
+              name="name"
+              type="name"
+              placeholder="Enter name"
+              autoComplete="off"
+              error={errors.name}
+              register={register}
+              validations={{
+                required: "Name is required",
+                maxLength: {
+                  value: 255,
+                  message: "Name should be less than 255 characters",
+                },
+              }}
+            />
+          </div>
+          <div>
+            <TextArea
+              id="description"
+              name="description"
+              label="Description"
+              placeholder="Enter description"
+              error={errors.description}
+              register={register}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <Button theme="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button type="submit" disabled={isSubmitting}>
+          {status
+            ? isSubmitting
+              ? "Updating View..."
+              : "Update View"
+            : isSubmitting
+            ? "Creating View..."
+            : "Create View"}
+        </Button>
+      </div>
+    </form>
+  );
+};