[SOA-51] Add tailwind class sorter (#52)

* chore 🏗️ (prettier): update prettier schema config * chore 🏗️ (prettier): run linter to re-format according to plugin enforced rules
mariadriana-deemaze · Dec 9, 2024 · 0a0a387 · 0a0a387
1 parent c787357
commit 0a0a387
Show file tree

Hide file tree

Showing 30 changed files with 211 additions and 201 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,6 +1,11 @@
 {
+  "trailingComma": "es5",
+  "semi": false,
   "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 120,
-  "tabWidth": 2
+  "useTabs": false,
+  "quoteProps": "consistent",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/app/mails/templates/post_reporting_user_status_mail.tsx b/app/mails/templates/post_reporting_user_status_mail.tsx
@@ -27,7 +27,7 @@ export default function Template({ user, report }: { user: User; report: PostRep
       >
         {/* <AdonisLogo /> */}
         <a href={route('home.show').path}>
-          <svg className="w-16 h-16 fill-primary" viewBox="0 0 33 33">
+          <svg className="h-16 w-16 fill-primary" viewBox="0 0 33 33">
             <path
               fillRule="evenodd"
               d="M0 16.333c0 13.173 3.16 16.333 16.333 16.333 13.173 0 16.333-3.16 16.333-16.333C32.666 3.16 29.506 0 16.333 0 3.16 0 0 3.16 0 16.333Zm6.586 3.393L11.71 8.083c.865-1.962 2.528-3.027 4.624-3.027 2.096 0 3.759 1.065 4.624 3.027l5.123 11.643c.233.566.432 1.297.432 1.93 0 2.893-2.029 4.923-4.923 4.923-.986 0-1.769-.252-2.561-.506-.812-.261-1.634-.526-2.695-.526-1.048 0-1.89.267-2.718.529-.801.253-1.59.503-2.538.503-2.894 0-4.923-2.03-4.923-4.924 0-.632.2-1.363.432-1.929Zm9.747-9.613-5.056 11.443c1.497-.699 3.227-1.032 5.056-1.032 1.763 0 3.56.333 4.99 1.032l-4.99-11.444Z"
@@ -36,7 +36,7 @@ export default function Template({ user, report }: { user: User; report: PostRep
           </svg>
         </a>
 
-        <hr className="bg-gray-100 my-5" />
+        <hr className="my-5 bg-gray-100" />
 
         <p className={paragraph}>
           Hello {user.name} {user.surname},
@@ -50,7 +50,7 @@ export default function Template({ user, report }: { user: User; report: PostRep
               'Thank you for helping us keep the community safe.'}
         </p>
 
-        <button className="bg-blue-500 h-10 rounded-md text-white">
+        <button className="h-10 rounded-md bg-blue-500 text-white">
           <a href={route('users.show', { params: { id: user.id } }).path}>View your page</a>
         </button>
 
@@ -65,7 +65,7 @@ export default function Template({ user, report }: { user: User; report: PostRep
         </p>
         <p className={paragraph}>— The Social Adonis team</p>
         <hr className={hr} />
-        <p className="text-cyan-200 text-xs">
+        <p className="text-xs text-cyan-200">
           Social Adonis, 354 Oyster Point Blvd, South San Francisco, CA 94080
         </p>
       </body>

diff --git a/app/mails/templates/user_post_reported_mail.tsx b/app/mails/templates/user_post_reported_mail.tsx
@@ -26,7 +26,7 @@ export default function Template({ user, report }: { user: User; report: PostRep
       >
         {/* <AdonisLogo /> */}
         <a href={route('home.show').path}>
-          <svg className="w-16 h-16 fill-primary" viewBox="0 0 33 33">
+          <svg className="h-16 w-16 fill-primary" viewBox="0 0 33 33">
             <path
               fillRule="evenodd"
               d="M0 16.333c0 13.173 3.16 16.333 16.333 16.333 13.173 0 16.333-3.16 16.333-16.333C32.666 3.16 29.506 0 16.333 0 3.16 0 0 3.16 0 16.333Zm6.586 3.393L11.71 8.083c.865-1.962 2.528-3.027 4.624-3.027 2.096 0 3.759 1.065 4.624 3.027l5.123 11.643c.233.566.432 1.297.432 1.93 0 2.893-2.029 4.923-4.923 4.923-.986 0-1.769-.252-2.561-.506-.812-.261-1.634-.526-2.695-.526-1.048 0-1.89.267-2.718.529-.801.253-1.59.503-2.538.503-2.894 0-4.923-2.03-4.923-4.924 0-.632.2-1.363.432-1.929Zm9.747-9.613-5.056 11.443c1.497-.699 3.227-1.032 5.056-1.032 1.763 0 3.56.333 4.99 1.032l-4.99-11.444Z"
@@ -35,7 +35,7 @@ export default function Template({ user, report }: { user: User; report: PostRep
           </svg>
         </a>
 
-        <hr className="bg-gray-100 my-5" />
+        <hr className="my-5 bg-gray-100" />
 
         <p className={paragraph}>
           Hello {user.name} {user.surname},
@@ -46,7 +46,7 @@ export default function Template({ user, report }: { user: User; report: PostRep
           and the content moderation has prooceeded in it's favour.
         </p>
 
-        <button className="bg-blue-500 h-10 rounded-md text-white">
+        <button className="h-10 rounded-md bg-blue-500 text-white">
           <a href={route('posts.show', { params: { id: user.id } }).path}>View the post</a>
         </button>
 
@@ -61,7 +61,7 @@ export default function Template({ user, report }: { user: User; report: PostRep
         </p>
         <p className={paragraph}>— The Social Adonis team</p>
         <hr className={hr} />
-        <p className="text-cyan-200 text-xs">
+        <p className="text-xs text-cyan-200">
           Social Adonis, 354 Oyster Point Blvd, South San Francisco, CA 94080
         </p>
       </body>

diff --git a/inertia/components/admin/generic/nav.tsx b/inertia/components/admin/generic/nav.tsx
@@ -31,7 +31,7 @@ export default function NavBar({ user }: { user: UserResponse | null }) {
   ]
 
   return (
-    <div className="fixed top-0 bg-black w-full z-10">
+    <div className="fixed top-0 z-10 w-full bg-black">
       <div className="border-b">
         <div className="flex h-16 items-center px-4">
           <nav className={cn('flex items-center space-x-4 lg:space-x-6')}>
@@ -41,7 +41,7 @@ export default function NavBar({ user }: { user: UserResponse | null }) {
                 key={`link-${index}`}
                 href={link}
                 except={['user']}
-                className="text-white text-sm font-medium transition-colors hover:text-primary"
+                className="text-sm font-medium text-white transition-colors hover:text-primary"
               >
                 {title}
               </Link>
@@ -61,7 +61,7 @@ export default function NavBar({ user }: { user: UserResponse | null }) {
                       <p className="text-sm font-medium leading-none">
                         {user.name} {user.surname}
                       </p>
-                      <p className="text-xs truncate leading-none text-muted-foreground">
+                      <p className="truncate text-xs leading-none text-muted-foreground">
                         {user.email}
                       </p>
                     </div>

diff --git a/inertia/components/generic/file_upload_preview.tsx b/inertia/components/generic/file_upload_preview.tsx
@@ -25,10 +25,10 @@ function PreviewThumbnail({ file }: { file: File }) {
   useEffect(handlePreview, [file])
 
   return (
-    <div className="relative flex flex-col w-14 h-14 overflow-hidden rounded-md">
-      {isLoading && <Loader2 className="h-5 w-5 mr-2 animate-spin text-muted" />}
+    <div className="relative flex h-14 w-14 flex-col overflow-hidden rounded-md">
+      {isLoading && <Loader2 className="mr-2 h-5 w-5 animate-spin text-muted" />}
       <div
-        className={`absolute w-full h-full bg-black duration-1000 ${isLoading ? 'opacity-100' : 'opacity-0'}`}
+        className={`absolute h-full w-full bg-black duration-1000 ${isLoading ? 'opacity-100' : 'opacity-0'}`}
       />
       <img ref={thumbnailRef} alt={file.name} className={isLoading ? 'opacity-0' : 'opacity-100'} />
     </div>

diff --git a/inertia/components/generic/highlighted_input.tsx b/inertia/components/generic/highlighted_input.tsx
@@ -230,7 +230,7 @@ export default function HighlightedInput<T>({
     <div className="relative w-full">
       <div
         ref={highlighterRef}
-        className="absolute overflow-y-scroll w-full h-full py-[0.56rem] px-[0.81rem] whitespace-pre-wrap break-words text-transparent pointer-events-none z-0 bg-blend-color"
+        className="pointer-events-none absolute z-0 h-full w-full overflow-y-scroll whitespace-pre-wrap break-words px-[0.81rem] py-[0.56rem] text-transparent bg-blend-color"
       >
         <p
           className="text-sm"
@@ -248,7 +248,7 @@ export default function HighlightedInput<T>({
       />
       {state.open && state.list.length > 0 && (
         <div className="relative w-full">
-          <Card className="absolute top-[calc(100%_+_5px)] w-full flex flex-col gap-2 px-2 py-1 divide-y divide-dashed">
+          <Card className="absolute top-[calc(100%_+_5px)] flex w-full flex-col gap-2 divide-y divide-dashed px-2 py-1">
             <ul>
               {state.list.map((item: T, i: number) => (
                 <li key={`random_${i}`}>

diff --git a/inertia/components/generic/info_panel.tsx b/inertia/components/generic/info_panel.tsx
@@ -14,7 +14,7 @@ export default function InfoPanel({
   return (
     <div
       className={cn(
-        'flex flex-col border rounded-md mt-2 py-2 px-4 gap-1',
+        'mt-2 flex flex-col gap-1 rounded-md border px-4 py-2',
         type === 'success' && 'border-green-200 bg-green-100',
         type === 'info' && 'border-blue-200 bg-blue-100',
         type === 'error' && 'border-red-200 bg-red-100',

diff --git a/inertia/components/generic/scroll_top.tsx b/inertia/components/generic/scroll_top.tsx
@@ -37,7 +37,7 @@ export default function ScrollTop() {
       ref={topRef}
       onClick={scrollTop}
       size="icon"
-      className="fixed right-4 bottom-4 z-10 duration-1000"
+      className="fixed bottom-4 right-4 z-10 duration-1000"
       type="button"
     >
       <ArrowUpFromDot size={15} />

diff --git a/inertia/components/generic/user_avatar.tsx b/inertia/components/generic/user_avatar.tsx
@@ -12,7 +12,7 @@ export const UserAvatar = ({ user, className }: { user: UserResponse; className?
         src={user?.attachments ? user?.attachments?.avatar?.link : '#'}
         alt={`${user.fullname}'s avatar image`}
         className={cn(
-          avatarLoadState === 'loaded' ? 'block animate-in fade-in duration-1000' : 'hidden'
+          avatarLoadState === 'loaded' ? 'block duration-1000 animate-in fade-in' : 'hidden'
         )}
       />
       <AvatarFallback>{user.fullname[0] || '-'}</AvatarFallback>

diff --git a/inertia/components/posts/feed_list.tsx b/inertia/components/posts/feed_list.tsx
@@ -56,26 +56,26 @@ export default function FeedList({
   return (
     <div className="feed-list w-full">
       {!allPosts ? (
-        <Loader2 className="h-5 w-5 mr-2 animate-spin text-muted" />
+        <Loader2 className="mr-2 h-5 w-5 animate-spin text-muted" />
       ) : (
         allPosts?.map((post, index) => (
           <PostCard key={index} user={currentUser} post={post} actions={!!currentUser} redirect />
         ))
       )}
-      <div className="flex justify-center py-5 w-full min-w-full">
+      <div className="flex w-full min-w-full justify-center py-5">
         {posts?.data?.length > 0 ? (
           <>
             {hasMorePosts ? (
-              <p ref={ref} className="text-sm text-gray-600 self-center cursor-pointer">
+              <p ref={ref} className="cursor-pointer self-center text-sm text-gray-600">
                 fetch more around here
               </p>
             ) : (
-              <p className="text-sm text-gray-600 self-center">Go touch grass outside.</p>
+              <p className="self-center text-sm text-gray-600">Go touch grass outside.</p>
             )}
           </>
         ) : (
-          <div className="flex w-full hn-screen items-center justify-center">
-            <p className="text-sm text-gray-600 self-center">Nothing to see here. 🍃</p>
+          <div className="hn-screen flex w-full items-center justify-center">
+            <p className="self-center text-sm text-gray-600">Nothing to see here. 🍃</p>
           </div>
         )}
       </div>

diff --git a/inertia/components/posts/form.tsx b/inertia/components/posts/form.tsx
@@ -143,9 +143,9 @@ export default function Form({
   return (
     <form
       onSubmit={handleSubmit}
-      className={cn(processing ? 'opacity-20 pointer-events-none' : 'opacity-100')}
+      className={cn(processing ? 'pointer-events-none opacity-20' : 'opacity-100')}
     >
-      <div className="flex flex-col w-full mb-6 gap-2">
+      <div className="mb-6 flex w-full flex-col gap-2">
         <Label htmlFor="content" className="text-left">
           Post content
         </Label>
@@ -162,12 +162,12 @@ export default function Form({
             onChange={(e) => setData('content', e.target.value)}
             Item={({ item, searchTerm, select }) => (
               <div
-                className={`react-${item.username} flex flex-row gap-2 items-center text-sm truncate text-ellipsis`}
+                className={`react-${item.username} flex flex-row items-center gap-2 truncate text-ellipsis text-sm`}
                 onClick={() => itemSelect(item, searchTerm, select)}
               >
                 <UserAvatar user={item} className="h-6 w-6" />
-                <div className="flex flex-col py-1 px-0">
-                  <p className="font-medium text-xs">{item.fullname}</p>
+                <div className="flex flex-col px-0 py-1">
+                  <p className="text-xs font-medium">{item.fullname}</p>
                   <p className="text-xs text-blue-500">@{item.username}</p>
                 </div>
               </div>
@@ -180,7 +180,7 @@ export default function Form({
       </div>
 
       {/* // TODO: Different uploaders per file type. Abstract to single button, and apply switch to input accordingly. */}
-      <div className="flex flex-col bg-gray-100 p-2 rounded-e-lg gap-2">
+      <div className="flex flex-col gap-2 rounded-e-lg bg-gray-100 p-2">
         <input
           ref={uploadImages}
           type="file"