sort tw classes

biome.json

@@ -6,7 +6,10 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "nursery": {
+        "useSortedClasses": "warn"
+      }
     }
   },
   "javascript": {

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "next build",
     "dev": "next dev",
-    "lint": "next lint",
+    "lint": "biome lint --write --unsafe ./src",
     "start": "next start",
     "format": "prettier --write ."
   },
@@ -29,19 +29,12 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
-    "@it-incubator/eslint-config": "^0.1.0",
     "@it-incubator/prettier-config": "^0.1.0",
     "@types/node": "^18.15.11",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.37.0",
-    "eslint-config-next": "13.2.4",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.2.6",
     "tailwindcss": "^3.3.1",
     "typescript": "^5.0.3"
   },

src/components/mode-toggle.tsx

@@ -19,7 +19,7 @@ export function ModeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Sun className="dark:-rotate-90 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>

src/components/todolist/index.tsx

@@ -2,15 +2,15 @@ import {
   type ChangeEvent,
   type FC,
   type FormEvent,
+  memo,
   useCallback,
   useMemo,
+  useState,
 } from "react"
-import { memo, useState } from "react"
 
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
@@ -24,7 +24,6 @@ import { Button } from "../ui/button"
 import { Input } from "../ui/input"
 
 import { Checkbox } from "@/components/ui/checkbox"
-import { Skeleton } from "@/components/ui/skeleton"
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 import {
   TaskStatus,
@@ -123,7 +122,7 @@ export const Todolist: FC<Props> = memo(({ todolist }) => {
   }, [filteredTasks, todolist.id, handleChangeStatus, handleDeleteTask])
 
   return (
-    <Card key={todolist.id} className={"w-72 flex flex-col justify-between"}>
+    <Card key={todolist.id} className={"flex w-72 flex-col justify-between"}>
       <div>
         <CardHeader className={"flex flex-row items-center justify-between"}>
           <CardTitle>{todolist.title}</CardTitle>

src/components/ui/card.tsx

@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
+      "font-semibold text-2xl leading-none tracking-tight",
       className
     )}
     {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ))

src/components/ui/dropdown-menu.tsx

@@ -45,7 +45,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <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",
+      "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 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in",
       className
     )}
     {...props}
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef<
       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",
+        "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 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
         className
       )}
       {...props}
@@ -97,7 +97,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     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",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 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}
@@ -121,7 +121,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <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",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -145,7 +145,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
+      "px-2 py-1.5 font-semibold text-sm",
       inset && "pl-8",
       className
     )}

src/components/ui/input/index.tsx

@@ -20,7 +20,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           id={idToUse}
           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",
+            "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:font-medium file:text-sm 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}

src/pages/_app.tsx

@@ -34,7 +34,7 @@ function Header() {
     logout()
   }
   return (
-    <header className={"flex justify-between items-center p-4"}>
+    <header className={"flex items-center justify-between p-4"}>
       <h1 className={"text-3xl"}>Tasks</h1>
       <div className={"flex gap-4"}>
         <ModeToggle />

src/pages/_document.tsx

@@ -2,9 +2,9 @@ import { Head, Html, Main, NextScript } from "next/document"
 
 export default function Document() {
   return (
-    <Html lang="en" className={"bg-zinc-950 h-screen"}>
+    <Html lang="en" className={"h-screen bg-zinc-950"}>
       <Head />
-      <body className={"h-full grid grid-rows-[auto_1fr] overflow-hidden"}>
+      <body className={"grid h-full grid-rows-[auto_1fr] overflow-hidden"}>
         <Main />
         <NextScript />
       </body>

src/pages/sign-up.tsx

@@ -13,6 +13,7 @@ const Login: NextPage = () => {
     e.preventDefault()
     const formData = new FormData(e.currentTarget)
 
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     const values = Object.fromEntries(formData) as any
     signUp(values)
   }
@@ -23,7 +24,7 @@ const Login: NextPage = () => {
         className={"flex w-96 flex-col gap-3 rounded-md border p-6"}
         onSubmit={handleSubmit}
       >
-        <h1 className={"text-2xl font-bold"}>Sign up</h1>
+        <h1 className={"font-bold text-2xl"}>Sign up</h1>
         <label className={"flex flex-col gap-1"}>
           Username (optional)
           <Input name={"username"} type="text" />

src/services/todolist-api/auth/auth.api.ts

@@ -22,7 +22,7 @@ export const AuthApi = {
     return res.data
   },
   async signUp(args: PostSignUpArgs) {
-    const res = await todolistApiInstance.post<any>("/auth/sign-up", args)
+    const res = await todolistApiInstance.post<void>("/auth/sign-up", args)
 
     return res.data
   },