style: add prettier plugin to sort tailwind class names

saifulshihab · Jun 1, 2024 · b4c0abf · b4c0abf
1 parent 719ae90
commit b4c0abf
Show file tree

Hide file tree

Showing 23 changed files with 221 additions and 204 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -3,5 +3,6 @@
   "tabWidth": 2,
   "semi": true,
   "jsxSingleQuote": false,
-  "printWidth": 80
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/package.json b/package.json
@@ -45,6 +45,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "postcss": "^8.4.31",
+    "prettier": "^3.3.0",
+    "prettier-plugin-tailwindcss": "^0.6.1",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
     "vite": "^4.3.2"

diff --git a/src/components/atoms/button/Button.tsx b/src/components/atoms/button/Button.tsx
@@ -34,13 +34,13 @@ const Button: React.FC<IProps> = (props) => {
     <button
       {...props}
       className={cn(
-        'px-4 items-center justify-center rounded-md shadow-md',
+        'items-center justify-center rounded-md px-4 shadow-md',
         block ? 'w-full' : 'inline-block',
         size === 'small' ? 'h-7' : size === 'large' ? 'h-11' : 'h-8',
         bg ? bg : 'bg-primary',
         color ? color : 'text-white',
         fontWeight ? fontWeight : 'font-semibold',
-        fontSize ? fontSize : 'text-sm'
+        fontSize ? fontSize : 'text-sm',
       )}
       disabled={isDisabled}
     >

diff --git a/src/components/atoms/input/TextInput.tsx b/src/components/atoms/input/TextInput.tsx
@@ -13,18 +13,22 @@ const TextInput: React.FC<IProps> = (props) => {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [field, { error, touched }] = useField(props as string);
   return (
-    <div className=" my-3 ">
+    <div className="my-3">
       <input
         ref={inputRef}
         {...field}
         {...props}
         className={cn(
-          'w-full px-2 border border-gray-300 rounded-md focus:border-primary outline-none',
-          inputSize === 'small' ? 'h-7' : inputSize === 'large' ? 'h-12' : 'h-8'
+          'w-full rounded-md border border-gray-300 px-2 outline-none focus:border-primary',
+          inputSize === 'small'
+            ? 'h-7'
+            : inputSize === 'large'
+              ? 'h-12'
+              : 'h-8',
         )}
       />
       {touched && error ? (
-        <div className="text-sm w-full text-red-500">
+        <div className="w-full text-sm text-red-500">
           <p>{error}</p>
         </div>
       ) : null}

diff --git a/src/components/atoms/navbar/index.tsx b/src/components/atoms/navbar/index.tsx
@@ -6,9 +6,9 @@ const Navbar: React.FC = () => {
   const location = useLocation();
   const pathName = location?.pathname.split('/')[1];
   return (
-    <div className="w-full h-14 bg-white grid grid-cols-7 gap-4 fixed z-50">
+    <div className="fixed z-50 grid h-14 w-full grid-cols-7 gap-4 bg-white">
       <div className="col-span-2 flex items-center">
-        <div className="flex items-center ml-2">
+        <div className="ml-2 flex items-center">
           <div className="h-10 text-primary">
             <Link to="/">
               <i className="fab fa-facebook text-[2.5rem]"></i>
@@ -18,15 +18,15 @@ const Navbar: React.FC = () => {
           <div className="h-10">
             <input
               placeholder="Search Facebook"
-              className="bg-gray-100 rounded-full h-full focus:outline-none ml-2 px-3 pr-4"
+              className="ml-2 h-full rounded-full bg-gray-100 px-3 pr-4 focus:outline-none"
             />
           </div>
         </div>
       </div>
       <div className="col-span-3 flex items-center justify-center space-x-2">
         <Link to="/" id="home">
-          <div className="w-24 h-12 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-100">
-            <div className="w-14 h-auto relative flex items-center justify-center">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+            <div className="relative flex h-auto w-14 items-center justify-center">
               <div
                 className={`${
                   pathName === '' || undefined
@@ -51,9 +51,9 @@ const Navbar: React.FC = () => {
         </Link>
         <Tooltip place="bottom" anchorSelect="#home" content="Home" />
         <Link to="/watch" id="watch">
-          <div className="w-24 h-12 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-100">
-            <div className="w-14 h-auto relative flex items-center justify-center">
-              <div className="absolute bg-red-500 text-white text-xs font-bold px-1 rounded-lg top-0 right-0">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+            <div className="relative flex h-auto w-14 items-center justify-center">
+              <div className="absolute right-0 top-0 rounded-lg bg-red-500 px-1 text-xs font-bold text-white">
                 9+
               </div>
               <div
@@ -78,8 +78,8 @@ const Navbar: React.FC = () => {
         </Link>
         <Tooltip place="bottom" anchorSelect="#watch" content="Video" />
         <Link to="/marketplace" id="marketplace">
-          <div className="w-24 h-12 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-100">
-            <div className="w-14 h-auto relative flex items-center justify-center">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+            <div className="relative flex h-auto w-14 items-center justify-center">
               <div
                 className={`${
                   pathName === 'marketplace' ? 'text-primary' : 'text-gray-400'
@@ -105,8 +105,8 @@ const Navbar: React.FC = () => {
           content="Marketplace"
         />
         <Link to="/groups" id="groups">
-          <div className="w-24 h-12 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-100">
-            <div className="w-14 h-auto relative flex items-center justify-center">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+            <div className="relative flex h-auto w-14 items-center justify-center">
               <div
                 className={`${
                   pathName === 'groups' ? 'text-primary' : 'text-gray-400'
@@ -129,8 +129,8 @@ const Navbar: React.FC = () => {
         </Link>
         <Tooltip place="bottom" anchorSelect="#groups" content="Groups" />
         <Link to="/gaming" id="gaming">
-          <div className="w-24 h-12 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-100">
-            <div className="w-14 h-auto relative flex items-center justify-center">
+          <div className="flex h-12 w-24 cursor-pointer items-center justify-center rounded-lg hover:bg-gray-100">
+            <div className="relative flex h-auto w-14 items-center justify-center">
               <div
                 className={`${
                   pathName === 'gaming' ? 'text-primary' : 'text-gray-400'
@@ -154,31 +154,31 @@ const Navbar: React.FC = () => {
         <Tooltip place="bottom" anchorSelect="#gaming" content="Gaming" />
       </div>
       <div className="col-span-2 flex items-center justify-end">
-        <div className="h-10 w-auto flex items-center space-x-2 pr-2">
+        <div className="flex h-10 w-auto items-center space-x-2 pr-2">
           <Link to="/profile">
-            <button className="h-10 px-2 flex space-x-1 items-center justify-center focus:outline-none hover:bg-gray-300 rounded-full">
+            <button className="flex h-10 items-center justify-center space-x-1 rounded-full px-2 hover:bg-gray-300 focus:outline-none">
               <div className="h-8">
                 <img
                   src="https://random.imagecdn.app/200/200"
-                  className="w-8 h-8 rounded-full"
+                  className="h-8 w-8 rounded-full"
                   alt="dp"
                 />
               </div>
-              <div className="h-8 flex items-center justify-content">
-                <p className="font-semibold text-sm">Saiful</p>
+              <div className="justify-content flex h-8 items-center">
+                <p className="text-sm font-semibold">Saiful</p>
               </div>
             </button>
           </Link>
-          <button className="w-10 h-10 bg-gray-200 focus:outline-none hover:bg-gray-300 rounded-full">
+          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
             <i className="fas fa-plus"></i>
           </button>
-          <button className="w-10 h-10 bg-gray-200 focus:outline-none hover:bg-gray-300 rounded-full">
+          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
             <i className="fab fa-facebook-messenger"></i>
           </button>
-          <button className="w-10 h-10 bg-gray-200 focus:outline-none hover:bg-gray-300 rounded-full">
+          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
             <i className="fas fa-bell"></i>
           </button>
-          <button className="w-10 h-10 bg-gray-200 focus:outline-none hover:bg-gray-300 rounded-full">
+          <button className="h-10 w-10 rounded-full bg-gray-200 hover:bg-gray-300 focus:outline-none">
             <i className="fas fa-sort-down"></i>
           </button>
         </div>

diff --git a/src/components/atoms/post/CreatePostBox.tsx b/src/components/atoms/post/CreatePostBox.tsx
@@ -2,37 +2,37 @@ import React from 'react';
 
 const CreatePostBox: React.FC = () => {
   return (
-    <div className="rounded-lg bg-white flex flex-col p-3 px-4 shadow">
-      <div className="flex items-center space-x-2 border-b pb-3 mb-2">
-        <div className="w-10 h-10">
+    <div className="flex flex-col rounded-lg bg-white p-3 px-4 shadow">
+      <div className="mb-2 flex items-center space-x-2 border-b pb-3">
+        <div className="h-10 w-10">
           <img
             src="https://random.imagecdn.app/200/200"
-            className="w-full h-full rounded-full"
+            className="h-full w-full rounded-full"
             alt="dp"
           />
         </div>
-        <button className="hover:bg-gray-200 focus:bg-gray-300 focus:outline-none flex-grow bg-gray-100 text-gray-500 text-left rounded-full h-10 pl-5">
+        <button className="h-10 flex-grow rounded-full bg-gray-100 pl-5 text-left text-gray-500 hover:bg-gray-200 focus:bg-gray-300 focus:outline-none">
           What&apos;s on your mind, Shihab?
         </button>
       </div>
-      <div className="flex space-x-3 font-thin text-sm text-gray-600 -mb-1">
-        <button className="flex-1 flex items-center h-8 focus:outline-none focus:bg-gray-200 justify-center space-x-2 hover:bg-gray-100 rounded-md">
+      <div className="-mb-1 flex space-x-3 text-sm font-thin text-gray-600">
+        <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
           <div>
             <i className="fab fa-youtube text-red-600"></i>
           </div>
           <div>
             <p className="font-semibold">Create Video</p>
           </div>
         </button>
-        <button className="flex-1 flex items-center h-8 focus:outline-none focus:bg-gray-200 justify-center space-x-2 hover:bg-gray-100 rounded-md">
+        <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
           <div>
             <i className="fas fa-images text-green-600"></i>
           </div>
           <div>
             <p className="font-semibold">Photos/Video</p>
           </div>
         </button>
-        <button className="flex-1 flex items-center h-8 focus:outline-none focus:bg-gray-200 justify-center space-x-2 hover:bg-gray-100 rounded-md">
+        <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
           <div>
             <i className="far fa-smile text-yellow-600"></i>
           </div>

diff --git a/src/components/atoms/post/index.tsx b/src/components/atoms/post/index.tsx
@@ -9,51 +9,51 @@ const Post: React.FC<IProps> = (props) => {
   const { post } = props;
   const { user } = post;
   return (
-    <div className="w-full shadow h-auto bg-white rounded-md">
+    <div className="h-auto w-full rounded-md bg-white shadow">
       <div className="flex items-center space-x-2 p-2.5 px-4">
-        <div className="w-10 h-10">
-          <img src={user.dp} className="w-full h-full rounded-full" alt="dp" />
+        <div className="h-10 w-10">
+          <img src={user.dp} className="h-full w-full rounded-full" alt="dp" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <p className="font-semibold text-sm text-gray-700">{user.fullName}</p>
+        <div className="flex flex-grow flex-col">
+          <p className="text-sm font-semibold text-gray-700">{user.fullName}</p>
           <span className="text-xs font-thin text-gray-400">
             {moment(post.createdAt).fromNow()}
           </span>
         </div>
-        <div className="w-8 h-8">
-          <button className="w-full h-full hover:bg-gray-100 rounded-full text-gray-400 focus:outline-none">
+        <div className="h-8 w-8">
+          <button className="h-full w-full rounded-full text-gray-400 hover:bg-gray-100 focus:outline-none">
             <i className="fas fa-ellipsis-h"></i>
           </button>
         </div>
       </div>
       {post.caption ? (
         <div className="mb-1">
-          <p className="text-gray-700 max-h-10 truncate px-3 text-sm">
+          <p className="max-h-10 truncate px-3 text-sm text-gray-700">
             {post.caption}
           </p>
         </div>
       ) : null}
       {post.image ? (
-        <div className="w-full h-76 max-h-100">
+        <div className="h-76 max-h-100 w-full">
           <img
             src={post.image}
             alt="postImage"
-            className="w-full h-76 max-h-100 object-cover"
+            className="h-76 max-h-100 w-full object-cover"
           />
         </div>
       ) : null}
 
-      <div className="w-full flex flex-col space-y-2 p-2 px-4">
-        <div className="flex items-center justify-between pb-2 border-b border-gray-300 text-gray-500 text-sm">
+      <div className="flex w-full flex-col space-y-2 p-2 px-4">
+        <div className="flex items-center justify-between border-b border-gray-300 pb-2 text-sm text-gray-500">
           <div className="flex items-center">
             <div className="flex items-center">
-              <button className="focus:outline-none flex items-center justify-center w-4 h-4 rounded-full bg-red-500 text-white">
+              <button className="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-white focus:outline-none">
                 <i style={{ fontSize: 10 }} className="fas fa-heart"></i>
               </button>
-              <button className="focus:outline-none flex items-center justify-center w-4 h-4 rounded-full bg-primary text-white">
+              <button className="flex h-4 w-4 items-center justify-center rounded-full bg-primary text-white focus:outline-none">
                 <i style={{ fontSize: 10 }} className="fas fa-thumbs-up"></i>
               </button>
-              <button className="focus:outline-none flex items-center justify-center w-4 h-4 rounded-full bg-yellow-500 text-white">
+              <button className="flex h-4 w-4 items-center justify-center rounded-full bg-yellow-500 text-white focus:outline-none">
                 <i style={{ fontSize: 10 }} className="fas fa-surprise"></i>
               </button>
               <div className="ml-1">
@@ -66,24 +66,24 @@ const Post: React.FC<IProps> = (props) => {
             <button>{post.shares} Shares</button>
           </div>
         </div>
-        <div className="flex space-x-3 text-gray-500 text-sm font-thin">
-          <button className="flex-1 flex items-center h-8 focus:outline-none focus:bg-gray-200 justify-center space-x-2 hover:bg-gray-100 rounded-md">
+        <div className="flex space-x-3 text-sm font-thin text-gray-500">
+          <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
             <div>
               <i className="fas fa-thumbs-up"></i>
             </div>
             <div>
               <p className="font-semibold">Like</p>
             </div>
           </button>
-          <button className="flex-1 flex items-center h-8 focus:outline-none focus:bg-gray-200 justify-center space-x-2 hover:bg-gray-100 rounded-md">
+          <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
             <div>
               <i className="fas fa-comment"></i>
             </div>
             <div>
               <p className="font-semibold">Comment</p>
             </div>
           </button>
-          <button className="flex-1 flex items-center h-8 focus:outline-none focus:bg-gray-200 justify-center space-x-2 hover:bg-gray-100 rounded-md">
+          <button className="flex h-8 flex-1 items-center justify-center space-x-2 rounded-md hover:bg-gray-100 focus:bg-gray-200 focus:outline-none">
             <div>
               <i className="fas fa-share"></i>
             </div>

diff --git a/src/components/atoms/story/index.tsx b/src/components/atoms/story/index.tsx
@@ -10,18 +10,18 @@ const Story: React.FC<IProps> = (props) => {
   const { user } = story;
   return (
     <div
-      className="w-28 h-48 relative rounded-xl p-3 to-pink-500 shadow cursor-pointer"
+      className="relative h-48 w-28 cursor-pointer rounded-xl to-pink-500 p-3 shadow"
       style={{ backgroundImage: `url(${story.image})` }}
     >
       <div className="absolute">
         <img
           src={user.dp}
-          className="w-10 h-10 rounded-full border-4 border-white"
+          className="h-10 w-10 rounded-full border-4 border-white"
           alt="story"
         />
       </div>
       <div className="absolute text-center" style={{ bottom: '5%' }}>
-        <p className="text-white font-semibold">{user.fullName}</p>
+        <p className="font-semibold text-white">{user.fullName}</p>
       </div>
     </div>
   );

diff --git a/src/components/container/PostContainer.tsx b/src/components/container/PostContainer.tsx
@@ -11,11 +11,11 @@ interface IProps {
 const PostContainer: React.FC<IProps> = (props) => {
   const { postsView } = props;
   return (
-    <div className="mt-4 w-full h-full">
+    <div className="mt-4 h-full w-full">
       <div
         className={cn(
           'grid gap-2',
-          postsView === 'gridView' ? 'grid-cols-2' : 'grid-cols-1'
+          postsView === 'gridView' ? 'grid-cols-2' : 'grid-cols-1',
         )}
       >
         {postsData.length ? (

diff --git a/src/components/layouts/GamingPageLayout.tsx b/src/components/layouts/GamingPageLayout.tsx
@@ -5,7 +5,7 @@ import MainContentContainer from '../common';
 const GamingPageLayout: React.FC<PropsWithChildren> = (props) => {
   const { children } = props;
   return (
-    <div className="w-full h-full flex flex-col">
+    <div className="flex h-full w-full flex-col">
       <Navbar />
       <MainContentContainer>{children}</MainContentContainer>
     </div>

diff --git a/src/components/layouts/MarketplacePage.tsx b/src/components/layouts/MarketplacePage.tsx
@@ -5,7 +5,7 @@ import MainContentContainer from '../common';
 const MarketplacePageLayout: React.FC<PropsWithChildren> = (props) => {
   const { children } = props;
   return (
-    <div className="w-full h-full flex flex-col">
+    <div className="flex h-full w-full flex-col">
       <Navbar />
       <MainContentContainer>{children}</MainContentContainer>
     </div>

diff --git a/src/components/layouts/NewsFeedLayout.tsx b/src/components/layouts/NewsFeedLayout.tsx
@@ -7,12 +7,12 @@ import RightSidebar from '../organisms/newsfeed/RightSidebar';
 const NewsFeedLayout: React.FC<PropsWithChildren> = (props) => {
   const { children } = props;
   return (
-    <div className="w-full h-full flex flex-col">
+    <div className="flex h-full w-full flex-col">
       <Navbar />
       <MainContentContainer>
         <div className="flex">
           <LeftSidebar />
-          <div className="flex-1 ">{children}</div>
+          <div className="flex-1">{children}</div>
           <RightSidebar />
         </div>
       </MainContentContainer>

diff --git a/src/components/layouts/ProfilePageLayout.tsx b/src/components/layouts/ProfilePageLayout.tsx
@@ -5,7 +5,7 @@ import MainContentContainer from '../common';
 const ProfilePageLayout: React.FC<PropsWithChildren> = (props) => {
   const { children } = props;
   return (
-    <div className="w-full h-full flex flex-col">
+    <div className="flex h-full w-full flex-col">
       <Navbar />
       <MainContentContainer>{children}</MainContentContainer>
     </div>