chore: WIP

components/ui/custom/CustomInput.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { Icon } from "@iconify/react";
+import { Input } from "@nextui-org/react";
+import React, { useState } from "react";
+import { Control, FieldPath } from "react-hook-form";
+import { z } from "zod";
+
+import { FormControl, FormField, FormMessage } from "@/components/ui/form";
+import { authFormSchema } from "@/types";
+
+type CustomInputProps =
+  | {
+      control: Control<z.infer<typeof authFormSchema>>;
+      name: FieldPath<z.infer<typeof authFormSchema>>;
+      password?: false;
+      label: string;
+      type: "text" | "email";
+      placeholder: string;
+      isRequired?: boolean;
+    }
+  | {
+      control: Control<z.infer<typeof authFormSchema>>;
+      password: true;
+      name?: never;
+      label?: never;
+      type?: never;
+      placeholder?: never;
+      isRequired?: never;
+    };
+
+export const CustomInput = ({
+  control,
+  name,
+  type,
+  label,
+  placeholder,
+  password = false,
+  isRequired = true,
+}: CustomInputProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => setIsVisible(!isVisible);
+
+  const inputProps = password
+    ? {
+        name: "password",
+        label: "Password",
+        type: isVisible ? "text" : "password",
+        placeholder: "Enter your password",
+        isRequired: true,
+      }
+    : { name, label, type, placeholder, isRequired };
+
+  return (
+    <FormField
+      control={control}
+      name={inputProps.name}
+      render={({ field }) => (
+        <>
+          <FormControl>
+            <Input
+              isRequired={inputProps.isRequired}
+              label={inputProps.label}
+              placeholder={inputProps.placeholder}
+              type={inputProps.type}
+              variant="bordered"
+              {...field}
+              endContent={
+                password && (
+                  <button type="button" onClick={toggleVisibility}>
+                    <Icon
+                      className="pointer-events-none text-2xl text-default-400"
+                      icon={
+                        isVisible ? "solar:eye-closed-linear" : "solar:eye-bold"
+                      }
+                    />
+                  </button>
+                )
+              }
+            />
+          </FormControl>
+          <FormMessage />
+        </>
+      )}
+    />
+  );
+};

components/ui/custom/index.ts

@@ -1 +1,2 @@
 export * from "./CustomBox";
+export * from "./CustomInput";

components/ui/form/Form.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+
+import { Label } from "./label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-red-500 dark:text-red-900", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn(
+        "text-[0.8rem] text-slate-500 dark:text-slate-400",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn(
+        "text-[0.8rem] font-medium text-red-500 dark:text-red-900",
+        className,
+      )}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+};

components/ui/form/Label.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

components/ui/form/index.ts

@@ -0,0 +1,2 @@
+export * from "./Form";
+export * from "./Label";

components/ui/sidebar/SidebarWrap.tsx

@@ -7,6 +7,7 @@ import { usePathname } from "next/navigation";
 import React, { useCallback } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
+import { logOut } from "@/actions";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 
 import {
@@ -126,6 +127,7 @@ export const SidebarWrap = () => {
         <Tooltip content="Log Out" isDisabled={!isCompact} placement="right">
           <Button
             aria-label="Log Out"
+            onClick={() => logOut}
             className={clsx(
               "justify-start text-default-500 data-[hover=true]:text-foreground",
               {