From 50d5cdec28f8134d3aa82accbff5d4a577013831 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 17 Jan 2024 22:06:17 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20linter=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/expo/src/app/index.tsx                   | 10 +++++-----
 .../src/app/_components/auth-showcase.tsx     |  4 ++--
 apps/nextjs/src/app/api/trpc/[trpc]/route.ts  |  1 +
 apps/nextjs/src/app/page.tsx                  |  2 +-
 apps/nextjs/src/trpc/react.tsx                |  2 +-
 packages/api/src/trpc.ts                      |  1 +
 packages/ui/src/dropdown-menu.tsx             | 20 +++++++++----------
 packages/ui/src/form.tsx                      | 16 +++++++--------
 packages/ui/src/input.tsx                     |  2 +-
 packages/ui/src/label.tsx                     |  2 +-
 packages/ui/src/theme.tsx                     |  2 +-
 packages/ui/src/toast.tsx                     |  2 +-
 12 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/index.tsx
index f53e766..adf7151 100644
--- a/apps/expo/src/app/index.tsx
+++ b/apps/expo/src/app/index.tsx
@@ -54,10 +54,10 @@ function CreatePost() {
     <View className="mt-4">
       <TextInput
         className="mb-2 rounded bg-white/10 p-2 text-white"
+        placeholder="Title"
         placeholderTextColor="rgba(255, 255, 255, 0.5)"
         value={title}
         onChangeText={setTitle}
-        placeholder="Title"
       />
       {error?.data?.zodError?.fieldErrors.title && (
         <Text className="mb-2 text-red-500">
@@ -66,10 +66,10 @@ function CreatePost() {
       )}
       <TextInput
         className="mb-2 rounded bg-white/10 p-2 text-white"
+        placeholder="Content"
         placeholderTextColor="rgba(255, 255, 255, 0.5)"
         value={content}
         onChangeText={setContent}
-        placeholder="Content"
       />
       {error?.data?.zodError?.fieldErrors.content && (
         <Text className="mb-2 text-red-500">
@@ -115,9 +115,9 @@ export default function Index() {
         </Text>
 
         <Button
-          onPress={() => void utils.post.all.invalidate()}
-          title="Refresh posts"
           color={"#f472b6"}
+          title="Refresh posts"
+          onPress={() => void utils.post.all.invalidate()}
         />
 
         <View className="py-2">
@@ -127,9 +127,9 @@ export default function Index() {
         </View>
 
         <FlashList
+          ItemSeparatorComponent={() => <View className="h-2" />}
           data={postQuery.data}
           estimatedItemSize={20}
-          ItemSeparatorComponent={() => <View className="h-2" />}
           renderItem={(p) => (
             <PostCard
               post={p.item}
diff --git a/apps/nextjs/src/app/_components/auth-showcase.tsx b/apps/nextjs/src/app/_components/auth-showcase.tsx
index bdc12f0..435a072 100644
--- a/apps/nextjs/src/app/_components/auth-showcase.tsx
+++ b/apps/nextjs/src/app/_components/auth-showcase.tsx
@@ -8,11 +8,11 @@ export async function AuthShowcase() {
     return (
       <form>
         <Button
-          size="lg"
           formAction={async () => {
             "use server";
             await signIn("discord");
           }}
+          size="lg"
         >
           Sign in with Discord
         </Button>
@@ -28,11 +28,11 @@ export async function AuthShowcase() {
 
       <form>
         <Button
-          size="lg"
           formAction={async () => {
             "use server";
             await signOut();
           }}
+          size="lg"
         >
           Sign out
         </Button>
diff --git a/apps/nextjs/src/app/api/trpc/[trpc]/route.ts b/apps/nextjs/src/app/api/trpc/[trpc]/route.ts
index c9a4269..ca064f2 100644
--- a/apps/nextjs/src/app/api/trpc/[trpc]/route.ts
+++ b/apps/nextjs/src/app/api/trpc/[trpc]/route.ts
@@ -35,6 +35,7 @@ const handler = auth(async (req) => {
         headers: req.headers,
       }),
     onError({ error, path }) {
+      // eslint-disable-next-line no-console
       console.error(`>>> tRPC Error on '${path}'`, error);
     },
   });
diff --git a/apps/nextjs/src/app/page.tsx b/apps/nextjs/src/app/page.tsx
index 6f030fc..5c61c1a 100644
--- a/apps/nextjs/src/app/page.tsx
+++ b/apps/nextjs/src/app/page.tsx
@@ -10,7 +10,7 @@ import {
 
 export const runtime = "edge";
 
-export default async function HomePage() {
+export default function HomePage() {
   // You can await this here if you don't want to show Suspense fallback below
   const posts = api.post.all();
 
diff --git a/apps/nextjs/src/trpc/react.tsx b/apps/nextjs/src/trpc/react.tsx
index 504ec4d..e782e7c 100644
--- a/apps/nextjs/src/trpc/react.tsx
+++ b/apps/nextjs/src/trpc/react.tsx
@@ -24,7 +24,7 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
         }),
         unstable_httpBatchStreamLink({
           url: getBaseUrl() + "/api/trpc",
-          async headers() {
+          headers() {
             const headers = new Headers();
             headers.set("x-trpc-source", "nextjs-react");
             return headers;
diff --git a/packages/api/src/trpc.ts b/packages/api/src/trpc.ts
index e5898ab..926d4c3 100644
--- a/packages/api/src/trpc.ts
+++ b/packages/api/src/trpc.ts
@@ -33,6 +33,7 @@ export const createTRPCContext = async (opts: {
   const session = opts.session ?? (await auth());
   const source = opts.headers.get("x-trpc-source") ?? "unknown";
 
+  // eslint-disable-next-line no-console
   console.log(">>> tRPC Request from", source, "by", session?.user);
 
   return {
diff --git a/packages/ui/src/dropdown-menu.tsx b/packages/ui/src/dropdown-menu.tsx
index 5ea9f27..df25851 100644
--- a/packages/ui/src/dropdown-menu.tsx
+++ b/packages/ui/src/dropdown-menu.tsx
@@ -24,12 +24,12 @@ const DropdownMenuSubTrigger = React.forwardRef<
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
       className,
     )}
+    ref={ref}
     {...props}
   >
     {children}
@@ -44,11 +44,11 @@ const DropdownMenuSubContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.SubContent
-    ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
+    ref={ref}
     {...props}
   />
 ));
@@ -61,13 +61,13 @@ const DropdownMenuContent = React.forwardRef<
 >(({ className, sideOffset = 4, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
+      ref={ref}
+      sideOffset={sideOffset}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
@@ -81,12 +81,12 @@ const DropdownMenuItem = React.forwardRef<
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
-    ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
     )}
+    ref={ref}
     {...props}
   />
 ));
@@ -97,12 +97,12 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
+    checked={checked}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
-    checked={checked}
+    ref={ref}
     {...props}
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
@@ -121,11 +121,11 @@ const DropdownMenuRadioItem = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
-    ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
+    ref={ref}
     {...props}
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
@@ -145,12 +145,12 @@ const DropdownMenuLabel = React.forwardRef<
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
-    ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
       className,
     )}
+    ref={ref}
     {...props}
   />
 ));
@@ -161,8 +161,8 @@ const DropdownMenuSeparator = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
-    ref={ref}
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    ref={ref}
     {...props}
   />
 ));
diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
index 30de18d..b960294 100644
--- a/packages/ui/src/form.tsx
+++ b/packages/ui/src/form.tsx
@@ -99,7 +99,7 @@ const FormItem = React.forwardRef<
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      <div className={cn("space-y-2", className)} ref={ref} {...props} />
     </FormItemContext.Provider>
   );
 });
@@ -113,9 +113,9 @@ const FormLabel = React.forwardRef<
 
   return (
     <Label
-      ref={ref}
       className={cn(error && "text-destructive", className)}
       htmlFor={formItemId}
+      ref={ref}
       {...props}
     />
   );
@@ -131,14 +131,14 @@ const FormControl = React.forwardRef<
 
   return (
     <Slot
-      ref={ref}
-      id={formItemId}
       aria-describedby={
         !error
           ? `${formDescriptionId}`
           : `${formDescriptionId} ${formMessageId}`
       }
       aria-invalid={!!error}
+      id={formItemId}
+      ref={ref}
       {...props}
     />
   );
@@ -153,9 +153,9 @@ const FormDescription = React.forwardRef<
 
   return (
     <p
-      ref={ref}
-      id={formDescriptionId}
       className={cn("text-[0.8rem] text-muted-foreground", className)}
+      id={formDescriptionId}
+      ref={ref}
       {...props}
     />
   );
@@ -175,9 +175,9 @@ const FormMessage = React.forwardRef<
 
   return (
     <p
-      ref={ref}
-      id={formMessageId}
       className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      id={formMessageId}
+      ref={ref}
       {...props}
     >
       {body}
diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
index b18b69b..8383f21 100644
--- a/packages/ui/src/input.tsx
+++ b/packages/ui/src/input.tsx
@@ -8,12 +8,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
-        type={type}
         className={cn(
           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
+        type={type}
         {...props}
       />
     );
diff --git a/packages/ui/src/label.tsx b/packages/ui/src/label.tsx
index 8ab59a1..7bde19a 100644
--- a/packages/ui/src/label.tsx
+++ b/packages/ui/src/label.tsx
@@ -15,8 +15,8 @@ const Label = React.forwardRef<
     VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root
-    ref={ref}
     className={cn(labelVariants(), className)}
+    ref={ref}
     {...props}
   />
 ));
diff --git a/packages/ui/src/theme.tsx b/packages/ui/src/theme.tsx
index 763130d..4a83038 100644
--- a/packages/ui/src/theme.tsx
+++ b/packages/ui/src/theme.tsx
@@ -18,7 +18,7 @@ function ThemeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
+        <Button size="icon" variant="outline">
           <SunIcon className="size-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <MoonIcon className="absolute size-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
diff --git a/packages/ui/src/toast.tsx b/packages/ui/src/toast.tsx
index 2958b9a..8c3f1ca 100644
--- a/packages/ui/src/toast.tsx
+++ b/packages/ui/src/toast.tsx
@@ -10,8 +10,8 @@ const Toaster = ({ ...props }: ToasterProps) => {
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
       className="toaster group"
+      theme={theme as ToasterProps["theme"]}
       toastOptions={{
         classNames: {
           toast: