🐛 fix: linter error

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}

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>

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);
     },
   });

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();
 

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;

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 {

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}
   />
 ));

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}

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}
       />
     );

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}
   />
 ));

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>

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: