style: add tailwind classes formatter

dinkelspiel · May 5, 2024 · aacaf70 · aacaf70
1 parent 3b31da5
commit aacaf70
Show file tree

Hide file tree

Showing 14 changed files with 46 additions and 45 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -7,5 +7,6 @@
   "trailingComma": "es5",
   "bracketSpacing": true,
   "bracketSameLine": false,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/app/(app)/dashboard/client.tsx b/app/(app)/dashboard/client.tsx
@@ -103,7 +103,7 @@ const Dashboard = ({
           <Tabs
             value={filterStyle}
             onValueChange={e => setFilterStyle(e as FilterStyle)}
-            className="lg:block hidden"
+            className="hidden lg:block"
           >
             <TabsList>
               <TabsTrigger value={'rating'}>
@@ -134,7 +134,7 @@ const Dashboard = ({
                 <Menu />
               </Button>
             </PopoverTrigger>
-            <PopoverContent className="me-4 z-50">
+            <PopoverContent className="z-50 me-4">
               <div className="grid gap-2">
                 <div className="relative">
                   <Input
@@ -143,7 +143,7 @@ const Dashboard = ({
                     value={filterTitle}
                     onChange={e => setFilterTitle(e.target.value)}
                   />
-                  <div className="absolute text-xs text-gray-600 flex right-[5.2px] gap-1 font-medium px-2 py-0.5 items-center top-1/2 -translate-y-1/2 rounded-md bg-white border border-gray-200">
+                  <div className="absolute right-[5.2px] top-1/2 flex -translate-y-1/2 items-center gap-1 rounded-md border border-gray-200 bg-white px-2 py-0.5 text-xs font-medium text-gray-600">
                     <Command className="size-3" /> K
                   </div>
                 </div>
@@ -181,7 +181,7 @@ const Dashboard = ({
         </HeaderContent>
       </Header>
       <div className="grid justify-center">
-        <div className="grid grid-cols-3 min-[700px]:grid-cols-4 min-[1100px]:grid-cols-5 min-[1300px]:grid-cols-6 min-[1500px]:grid-cols-7 w-fit gap-4">
+        <div className="grid w-fit grid-cols-3 gap-4 min-[700px]:grid-cols-4 min-[1100px]:grid-cols-5 min-[1300px]:grid-cols-6 min-[1500px]:grid-cols-7">
           {userEntries
             .sort((a, b) => {
               switch (filterStyle) {

diff --git a/app/(app)/dashboard/userEntry.tsx b/app/(app)/dashboard/userEntry.tsx
@@ -45,7 +45,7 @@ const UserEntryComponent = ({
         } else {
           return (
             <Drawer open={open} onOpenChange={setOpen}>
-              <DrawerContent className="p-6 min-h-[80dvh]">
+              <DrawerContent className="min-h-[80dvh] p-6">
                 <ModifyUserEntry userEntry={userEntry} setOpen={setOpen} />
               </DrawerContent>
             </Drawer>
@@ -83,13 +83,13 @@ const ModifyUserEntry = ({
   }, [state]);
 
   return (
-    <div className="grid grid-rows-[max-content,max-content,1fr,max-content] h-full w-full grow">
+    <div className="grid h-full w-full grow grid-rows-[max-content,max-content,1fr,max-content]">
       <input type="hidden" value={userEntry.id} name="userEntryId" />
-      <div className="xl:w-max text-lg font-semibold tracking-tight mb-8 break-all w-fit">
+      <div className="mb-8 w-fit break-all text-lg font-semibold tracking-tight xl:w-max">
         {userEntry.entry.originalTitle}
       </div>
-      <div className="flex flex-row gap-3 items-center text-sm border-b border-b-gray-200 py-3">
-        <div className="text-muted-foreground w-max">
+      <div className="flex flex-row items-center gap-3 border-b border-b-gray-200 py-3 text-sm">
+        <div className="w-max text-muted-foreground">
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger>Rating</TooltipTrigger>
@@ -109,16 +109,16 @@ const ModifyUserEntry = ({
           />
         </div>
       </div>
-      <div className="flex flex-row gap-2 items-center text-sm h-full py-3">
+      <div className="flex h-full flex-row items-center gap-2 py-3 text-sm">
         <Textarea
-          className="focus-visible:ring-0 shadow-none border-none p-0 resize-none h-full"
+          className="h-full resize-none border-none p-0 shadow-none focus-visible:ring-0"
           placeholder="Write your review"
           value={notes}
           onChange={e => setNotes(e.target.value)}
           name="notes"
         />
       </div>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <form action={formAction}>
           <input type="hidden" value={userEntry.id} name="userEntryId" />
           <input type="hidden" value={rating} name="rating" />

diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
@@ -30,7 +30,7 @@ const Layout = async ({ children }: { children: ReactNode }) => {
         </SidebarButton>
       </Sidebar>
 
-      <main className="px-5 py-4 flex flex-col gap-4">{children}</main>
+      <main className="flex flex-col gap-4 px-5 py-4">{children}</main>
       <Toaster />
     </SidebarLayout>
   );

diff --git a/app/(guest)/page.tsx b/app/(guest)/page.tsx
@@ -1,5 +1,5 @@
 const Page = () => {
-  return <div className="font-bold text-xl">W.I.P Medialog Homepage</div>;
+  return <div className="text-xl font-bold">W.I.P Medialog Homepage</div>;
 };
 
 export default Page;
diff --git a/app/auth/login/page.tsx b/app/auth/login/page.tsx
@@ -23,11 +23,11 @@ const Page = () => {
   }, [state]);
 
   return (
-    <main className="grid items-center justify-center w-full bg-neutral-100 h-[100dvh]">
-      <form className="grid gap-8 w-[350px]" action={formAction}>
+    <main className="grid h-[100dvh] w-full items-center justify-center bg-neutral-100">
+      <form className="grid w-[350px] gap-8" action={formAction}>
         <div className="grid gap-2">
           <Logo className="mb-2" />
-          <h3 className="font-bold text-[22px] leading-7 tracking-[-0.02em]">
+          <h3 className="text-[22px] font-bold leading-7 tracking-[-0.02em]">
             Login to Medialog
           </h3>
           <p className="text-sm text-muted-foreground">

diff --git a/app/auth/sign-up/page.tsx b/app/auth/sign-up/page.tsx
@@ -23,11 +23,11 @@ const Page = () => {
   }, [state]);
 
   return (
-    <main className="grid items-center justify-center w-full bg-neutral-100 h-[100dvh]">
-      <form className="grid gap-8 w-[350px]" action={formAction}>
+    <main className="grid h-[100dvh] w-full items-center justify-center bg-neutral-100">
+      <form className="grid w-[350px] gap-8" action={formAction}>
         <div className="grid gap-2">
           <Logo className="mb-2" />
-          <h3 className="font-bold text-[22px] leading-7 tracking-[-0.02em]">
+          <h3 className="text-[22px] font-bold leading-7 tracking-[-0.02em]">
             Sign up to Medialog
           </h3>
           <p className="text-sm text-muted-foreground">

diff --git a/components/header.tsx b/components/header.tsx
@@ -19,7 +19,7 @@ export const HeaderHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => {
   return (
-    <div className={cn('flex flex-col xl:w-max w-full', className)} {...props}>
+    <div className={cn('flex w-full flex-col xl:w-max', className)} {...props}>
       {children}
     </div>
   );
@@ -33,7 +33,7 @@ export const HeaderTitle = ({
   return (
     <div
       className={cn(
-        'xl:w-max w-full scroll-m-20 text-2xl font-semibold tracking-tight',
+        'w-full scroll-m-20 text-2xl font-semibold tracking-tight xl:w-max',
         className
       )}
       {...props}
@@ -50,7 +50,7 @@ export const HeaderDescription = ({
 }: React.HTMLAttributes<HTMLDivElement>) => {
   return (
     <div
-      className={cn('xl:w-max w-full text-muted-foreground', className)}
+      className={cn('w-full text-muted-foreground xl:w-max', className)}
       {...props}
     >
       {children}
@@ -65,7 +65,7 @@ export const HeaderContent = ({
 }: React.HTMLAttributes<HTMLDivElement>) => {
   return (
     <div
-      className={cn('flex justify-end w-full items-center gap-2', className)}
+      className={cn('flex w-full items-center justify-end gap-2', className)}
       {...props}
     >
       {children}

diff --git a/components/layouts/sidebar.tsx b/components/layouts/sidebar.tsx
@@ -4,7 +4,7 @@ import BaseLayout from './base';
 const SidebarLayout = ({ children }: { children: ReactNode }) => {
   return (
     <BaseLayout
-      className={`grid grid-cols-1 grid-rows-[70px,1fr] lg:grid-rows-1 lg:grid-cols-[256px,1fr]`}
+      className={`grid grid-cols-1 grid-rows-[70px,1fr] lg:grid-cols-[256px,1fr] lg:grid-rows-1`}
     >
       {children}
     </BaseLayout>

diff --git a/components/sidebar.tsx b/components/sidebar.tsx
@@ -24,25 +24,25 @@ export const Sidebar = ({
     <div
       id="sidebar"
       className={cn(
-        `z-40 h-auto lg:h-[100dvh] sticky top-0 w-full transition-transform`,
+        `sticky top-0 z-40 h-auto w-full transition-transform lg:h-[100dvh]`,
         className
       )}
       {...props}
       aria-label="Sidebar"
     >
-      <div className="flex bg-neutral-100 shadow-[inset_0_0px_8px_0_rgb(0_0_0_/_0.02)] h-[75px] justify-center lg:justify-start border-b lg:border-b-0 lg:h-full flex-col overflow-y-auto border-slate-200 px-3 py-4 dark:border-slate-700 dark:bg-slate-900">
+      <div className="flex h-[75px] flex-col justify-center overflow-y-auto border-b border-slate-200 bg-neutral-100 px-3 py-4 shadow-[inset_0_0px_8px_0_rgb(0_0_0_/_0.02)] dark:border-slate-700 dark:bg-slate-900 lg:h-full lg:justify-start lg:border-b-0">
         <SidebarHeader {...headerProps}>
           {header}
-          <button className="lg:hidden w-full justify-end flex">
+          <button className="flex w-full justify-end lg:hidden">
             <div className="sr-only">Öppna meny</div>
-            <Menu onClick={() => setSheetOpen(true)} className="w-5 h-5" />
+            <Menu onClick={() => setSheetOpen(true)} className="h-5 w-5" />
           </button>
         </SidebarHeader>
-        <ul className="space-y-2 text-sm font-medium flex-col h-full lg:flex hidden">
+        <ul className="hidden h-full flex-col space-y-2 text-sm font-medium lg:flex">
           {children}
         </ul>
         <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-          <SheetContent className="list-none pt-12 gap-2 flex flex-col bg-neutral-100">
+          <SheetContent className="flex list-none flex-col gap-2 bg-neutral-100 pt-12">
             {children}
           </SheetContent>
         </Sheet>
@@ -58,7 +58,7 @@ export const SidebarHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      `lg:mb-12 flex whitespace-nowrap items-center rounded-lg text-slate-900 dark:text-white gap-3 text-base font-semibold [&>svg]:size-3`,
+      `flex items-center gap-3 whitespace-nowrap rounded-lg text-base font-semibold text-slate-900 dark:text-white lg:mb-12 [&>svg]:size-3`,
       className
     )}
     {...props}
@@ -91,7 +91,7 @@ export const SidebarFooter = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(`flex-1 flex flex-col justify-end gap-2`, className)}
+    className={cn(`flex flex-1 flex-col justify-end gap-2`, className)}
     {...props}
   >
     {children}
@@ -118,7 +118,7 @@ const ClientSidebarButton = ({
           : 'ghost'
       }
       className={cn(
-        `w-full justify-start select-none`,
+        `w-full select-none justify-start`,
         {
           'text-white': pathname.endsWith(href),
           'text-muted-foreground': !pathname.endsWith(href),

diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center gap-2 justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
       className
     )}
     {...props}

diff --git a/components/userDisplay.tsx b/components/userDisplay.tsx
@@ -18,7 +18,7 @@ const UserDisplay = ({ user }: { user: User }) => {
       <DropdownMenuTrigger>
         <div className="flex gap-x-3">
           <Logo className="size-[41px]" />
-          <div className="flex justify-center items-start flex-col pb-[1px]">
+          <div className="flex flex-col items-start justify-center pb-[1px]">
             <div className="text-xs font-normal">Medialog</div>
             <div className="text-base font-semibold">@{user.username}</div>
           </div>
@@ -28,7 +28,7 @@ const UserDisplay = ({ user }: { user: User }) => {
         <form action={logout} className="w-full">
           <button type="submit" className="w-full">
             <DropdownMenuItem>
-              <LogOut className="size-3 me-2" />
+              <LogOut className="me-2 size-3" />
               Log out
             </DropdownMenuItem>
           </button>

diff --git a/components/userEntryCard.tsx b/components/userEntryCard.tsx
@@ -11,7 +11,7 @@ const UserEntryCard = ({
 } & HTMLProps<HTMLDivElement>) => {
   return (
     <div
-      className="w-full aspect-[2/3] rounded-lg bg-cover shadow-md relative cursor-pointer"
+      className="relative aspect-[2/3] w-full cursor-pointer rounded-lg bg-cover shadow-md"
       style={{ backgroundImage: `url(${userEntry.entry.posterPath})` }}
       {...props}
     >
@@ -27,14 +27,14 @@ const UserEntryCard = ({
           }
         })()}
       </div>
-      <div className="text-transparent select-none">
+      <div className="select-none text-transparent">
         {userEntry.entry.originalTitle}
       </div>
-      <div className="absolute top-[40%] h-[60%] w-full rounded-bl-lg rounded-br-lg flex flex-col justify-end bg-gradient-to-t from-slate-900 to-transparent object-cover p-2">
-        <div className="text-white font-semibold text-left">
+      <div className="absolute top-[40%] flex h-[60%] w-full flex-col justify-end rounded-bl-lg rounded-br-lg bg-gradient-to-t from-slate-900 to-transparent object-cover p-2">
+        <div className="text-left font-semibold text-white">
           {userEntry.entry.originalTitle}
         </div>
-        <div className="flex flex-row justify-between items-center">
+        <div className="flex flex-row items-center justify-between">
           <div className="text-sm text-slate-400">
             {userEntry.entry.releaseDate.getFullYear()}
           </div>

diff --git a/package.json b/package.json
@@ -75,8 +75,8 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-only-warn": "^1.1.0",
     "postcss": "^8.4.31",
-    "prettier": "^3.1.0",
-    "prettier-plugin-tailwindcss": "^0.5.7",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "prisma": "^5.13.0",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.1.6"