Selleo · wielopolski · Jan 17, 2025 · Jan 17, 2025
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,3 +1,4 @@
+/** @type {import('prettier').Config} */
 module.exports = {
   trailingComma: "all",
   singleQuote: false,
@@ -10,5 +11,13 @@ module.exports = {
   arrowParens: "always",
   quoteProps: "as-needed",
   endOfLine: "lf",
-  plugins: ["prettier-plugin-tailwindcss"],
+  overrides: [
+    {
+      files: ["apps/web/**/*.{ts,tsx,js,jsx}"],
+      options: {
+        plugins: ["prettier-plugin-tailwindcss"],
+        tailwindConfig: "./apps/web/tailwind.config.ts",
+      },
+    },
+  ],
 };
diff --git a/apps/web/app/components/ButtonGroup/ButtonGroup.tsx b/apps/web/app/components/ButtonGroup/ButtonGroup.tsx
@@ -27,7 +27,7 @@ export const ButtonGroup = ({ className, buttons }: ButtonGroupProps) => {
           key={index}
           {...button}
           className={cn({
-            "text-primary-700 shadow-primary bg-white": isActive,
+            "bg-white text-primary-700 shadow-primary": isActive,
             "bg-neutral-50 text-neutral-400": !isActive,
           })}
         />

diff --git a/apps/web/app/components/FileUploadInput/EmptyStateUpload.tsx b/apps/web/app/components/FileUploadInput/EmptyStateUpload.tsx
@@ -30,7 +30,7 @@ const EmptyStateUpload = ({
       htmlFor="file-upload"
       className="flex h-[240px] w-full max-w-[440px] flex-col items-center justify-center gap-y-3 rounded-lg border border-neutral-200 bg-white"
     >
-      <Icon name="UploadImageIcon" className="text-primary-700 size-10" />
+      <Icon name="UploadImageIcon" className="size-10 text-primary-700" />
       <div className="body-sm flex flex-col gap-y-1">
         <div className="text-center">
           <span className="text-primary-700">{t("uploadFile.header")}</span>{" "}

diff --git a/apps/web/app/components/FileUploadInput/FileUploadInput.tsx b/apps/web/app/components/FileUploadInput/FileUploadInput.tsx
@@ -75,7 +75,7 @@ const FileUploadInput = ({
             htmlFor="file-upload"
             className="absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-y-3 rounded-lg border border-neutral-200 bg-[rgba(18,21,33,0.8)]"
           >
-            <Icon name="UploadImageIcon" className="text-primary-700 size-10" />
+            <Icon name="UploadImageIcon" className="size-10 text-primary-700" />
             <div className="body-sm flex flex-col gap-y-1">
               <div className="text-center">
                 <span className="text-primary-400">Click to replace</span>{" "}
@@ -129,7 +129,7 @@ const FileUploadInput = ({
           htmlFor="file-upload"
           className="absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-y-3 rounded-lg border border-neutral-200 bg-[rgba(18,21,33,0.8)]"
         >
-          <Icon name="UploadImageIcon" className="text-primary-700 size-10" />
+          <Icon name="UploadImageIcon" className="size-10 text-primary-700" />
           <div className="body-sm flex flex-col gap-y-1">
             <div className="text-center">
               <span className="text-primary-400">Click to replace</span>{" "}

diff --git a/apps/web/app/components/FileUploadInput/ImageUploadInput.tsx b/apps/web/app/components/FileUploadInput/ImageUploadInput.tsx
@@ -39,7 +39,7 @@ const ImageUploadInput = ({
           <Icon name="UploadImageIcon" />
 
           <div className="mt-2 flex items-center justify-center">
-            <span className={`text-primary-400 text-lg font-semibold`}>
+            <span className={`text-lg font-semibold text-primary-400`}>
               {field.value ? t("uploadFile.replace") : t("uploadFile.header")}
             </span>
             <span className="ml-2 text-lg font-semibold">{t("uploadFile.subHeader")}</span>

diff --git a/apps/web/app/components/Navigation/Navigation.tsx b/apps/web/app/components/Navigation/Navigation.tsx
@@ -17,12 +17,12 @@ export function Navigation({ menuItems }: DashboardNavigationProps) {
   const { role } = useUserRole();
 
   return (
-    <header className="3xl:w-60 3xl:p-4 sticky top-0 z-10 h-min w-full 2xl:static 2xl:flex 2xl:h-dvh 2xl:w-14 2xl:flex-col 2xl:gap-y-6 2xl:px-2 2xl:py-4">
+    <header className="sticky top-0 z-10 h-min w-full 2xl:static 2xl:flex 2xl:h-dvh 2xl:w-14 2xl:flex-col 2xl:gap-y-6 2xl:px-2 2xl:py-4 3xl:w-60 3xl:p-4">
       <NavigationHeader isMobileNavOpen={isMobileNavOpen} setIsMobileNavOpen={setIsMobileNavOpen} />
-      <Separator className="bg-primary-200 sr-only 2xl:not-sr-only 2xl:h-[1px]" />
+      <Separator className="sr-only bg-primary-200 2xl:not-sr-only 2xl:h-[1px]" />
       <nav
         className={cn("2xl:flex 2xl:h-full 2xl:flex-col 2xl:justify-between", {
-          "bg-primary-50 flex h-[calc(100dvh-4rem)] flex-col justify-between gap-y-3 px-4 pb-4 pt-7 2xl:bg-transparent 2xl:p-0":
+          "flex h-[calc(100dvh-4rem)] flex-col justify-between gap-y-3 bg-primary-50 px-4 pb-4 pt-7 2xl:bg-transparent 2xl:p-0":
             isMobileNavOpen,
           "sr-only 2xl:not-sr-only": !isMobileNavOpen,
         })}

diff --git a/apps/web/app/components/Navigation/NavigationFooter.tsx b/apps/web/app/components/Navigation/NavigationFooter.tsx
@@ -19,7 +19,7 @@ export function NavigationFooter({ setIsMobileNavOpen }: NavigationFooterProps)
   return (
     <menu className="grid w-full grid-cols-2 gap-2 md:grid-cols-6 md:gap-4 2xl:flex 2xl:flex-col 2xl:gap-2 2xl:self-end">
       <li className="col-span-2 md:col-span-6 2xl:hidden">
-        <Separator className="3xl:my-2 bg-primary-200 2xl:h-[1px]" />
+        <Separator className="bg-primary-200 2xl:h-[1px] 3xl:my-2" />
       </li>
       <li className="col-span-2 md:col-span-3">
         <Tooltip>
@@ -35,12 +35,12 @@ export function NavigationFooter({ setIsMobileNavOpen }: NavigationFooterProps)
               }
             >
               <Icon name="Settings" className="size-6" />
-              <span className="3xl:not-sr-only 2xl:sr-only">{t("navigationSideBar.settings")}</span>
+              <span className="2xl:sr-only 3xl:not-sr-only">{t("navigationSideBar.settings")}</span>
             </NavLink>
           </TooltipTrigger>
           <TooltipContent
             side="right"
-            className="3xl:hidden hidden 2xl:block 2xl:bg-neutral-950 2xl:capitalize 2xl:text-white"
+            className="hidden 2xl:block 2xl:bg-neutral-950 2xl:capitalize 2xl:text-white 3xl:hidden"
           >
             {t("navigationSideBar.settings")}
           </TooltipContent>
@@ -61,12 +61,12 @@ export function NavigationFooter({ setIsMobileNavOpen }: NavigationFooterProps)
               className="flex w-full items-center gap-x-3 rounded-lg bg-white px-4 py-3.5 text-neutral-900 2xl:p-2"
             >
               <Icon name="Logout" className="size-6" />
-              <span className="3xl:not-sr-only 2xl:sr-only">{t("navigationSideBar.logout")}</span>
+              <span className="2xl:sr-only 3xl:not-sr-only">{t("navigationSideBar.logout")}</span>
             </button>
           </TooltipTrigger>
           <TooltipContent
             side="right"
-            className="3xl:hidden hidden 2xl:block 2xl:bg-neutral-950 2xl:capitalize 2xl:text-white"
+            className="hidden 2xl:block 2xl:bg-neutral-950 2xl:capitalize 2xl:text-white 3xl:hidden"
           >
             {t("navigationSideBar.logout")}
           </TooltipContent>

diff --git a/apps/web/app/components/Navigation/NavigationHeader.tsx b/apps/web/app/components/Navigation/NavigationHeader.tsx
@@ -14,8 +14,8 @@ export function NavigationHeader({ isMobileNavOpen, setIsMobileNavOpen }: Naviga
   return (
     <div className="flex w-full justify-between px-4 py-3 2xl:h-20 2xl:items-center 2xl:justify-center 2xl:p-0">
       <Link to="/" aria-label="Go to homepage">
-        <Icon name="SelleoLogo" className="3xl:not-sr-only 3xl:h-12 h-10 w-full 2xl:sr-only" />
-        <Icon name="SelleoSignet" className="3xl:sr-only sr-only 2xl:not-sr-only" />
+        <Icon name="SelleoLogo" className="h-10 w-full 2xl:sr-only 3xl:not-sr-only 3xl:h-12" />
+        <Icon name="SelleoSignet" className="sr-only 2xl:not-sr-only 3xl:sr-only" />
       </Link>
       <MobileMenuToggle isMobileNavOpen={isMobileNavOpen} setIsMobileNavOpen={setIsMobileNavOpen} />
     </div>

diff --git a/apps/web/app/components/Navigation/NavigationMenuItem.tsx b/apps/web/app/components/Navigation/NavigationMenuItem.tsx
@@ -28,12 +28,12 @@ export function NavigationMenuItem({ item, setIsMobileNavOpen }: NavigationMenuI
             }
           >
             <Icon name={item.iconName} className="size-6" />
-            <span className="3xl:not-sr-only capitalize 2xl:sr-only">{item.label}</span>
+            <span className="capitalize 2xl:sr-only 3xl:not-sr-only">{item.label}</span>
           </NavLink>
         </TooltipTrigger>
         <TooltipContent
           side="right"
-          className="3xl:hidden hidden 2xl:block 2xl:bg-neutral-950 2xl:capitalize 2xl:text-white"
+          className="hidden 2xl:block 2xl:bg-neutral-950 2xl:capitalize 2xl:text-white 3xl:hidden"
         >
           {item.label}
         </TooltipContent>

diff --git a/apps/web/app/components/RichText/Editor.tsx b/apps/web/app/components/RichText/Editor.tsx
@@ -31,7 +31,7 @@ const Editor = ({ content, placeholder, onChange, id, className }: EditorProps)
   if (!editor) return <></>;
 
   return (
-    <div className="prose bg-background dark:prose-invert w-full max-w-none overflow-hidden rounded-lg border border-neutral-300 [&_.ProseMirror]:leading-tight">
+    <div className="prose w-full max-w-none overflow-hidden rounded-lg border border-neutral-300 bg-background dark:prose-invert [&_.ProseMirror]:leading-tight">
       <EditorToolbar editor={editor} />
       <div
         className={cn(

diff --git a/apps/web/app/components/TableSortButton/TableSortButton.tsx b/apps/web/app/components/TableSortButton/TableSortButton.tsx
@@ -27,7 +27,7 @@ const SortButton = <T,>({ column, children }: SortButtonProps<T>) => {
     <Button
       variant="ghost"
       onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-      className="hover:text-primary-600 flex items-center p-0 hover:bg-transparent"
+      className="flex items-center p-0 hover:bg-transparent hover:text-primary-600"
     >
       {children}
       {renderSortIcon()}

diff --git a/apps/web/app/components/UserProfile/UserProfile.tsx b/apps/web/app/components/UserProfile/UserProfile.tsx
@@ -8,7 +8,7 @@ export const UserProfile = () => {
   } = useCurrentUserSuspense();
 
   return (
-    <div className="bg-primary-50 mt-auto flex w-full max-w-[268px] items-center justify-between rounded-md p-[18px]">
+    <div className="mt-auto flex w-full max-w-[268px] items-center justify-between rounded-md bg-primary-50 p-[18px]">
       <div className="flex min-w-0 gap-x-2">
         <Avatar>
           <Gravatar email={email} />

diff --git a/apps/web/app/components/VideoPlayer/VideoPlayer.tsx b/apps/web/app/components/VideoPlayer/VideoPlayer.tsx
@@ -80,7 +80,7 @@ export const VideoPlayer = ({ url, onVideoEnded }: VideoPlayerProps) => {
       <div
         className={cn("absolute inset-0 bg-black transition-opacity duration-200", {
           "opacity-48": !isPlaying,
-          "group-hover:opacity-48 opacity-0": isPlaying,
+          "opacity-0 group-hover:opacity-48": isPlaying,
         })}
       />
 
@@ -97,15 +97,15 @@ export const VideoPlayer = ({ url, onVideoEnded }: VideoPlayerProps) => {
           onClick={handleSeek(-10)}
           className="relative rounded-full p-4 transition-transform duration-200 hover:scale-110"
         >
-          <div className="opacity-32 absolute inset-0 rounded-full bg-white" />
+          <div className="absolute inset-0 rounded-full bg-white opacity-32" />
           <SkipBack className="relative z-10 h-8 w-8 text-white" />
         </button>
 
         <button
           onClick={togglePlay}
           className="relative rounded-full p-4 transition-transform duration-200 hover:scale-110"
         >
-          <div className="opacity-32 absolute inset-0 rounded-full bg-white" />
+          <div className="absolute inset-0 rounded-full bg-white opacity-32" />
           {isPlaying ? (
             <Pause className="relative z-10 h-8 w-8 text-white" />
           ) : (
@@ -117,7 +117,7 @@ export const VideoPlayer = ({ url, onVideoEnded }: VideoPlayerProps) => {
           onClick={handleSeek(10)}
           className="relative rounded-full p-4 transition-transform duration-200 hover:scale-110"
         >
-          <div className="opacity-32 absolute inset-0 rounded-full bg-white" />
+          <div className="absolute inset-0 rounded-full bg-white opacity-32" />
           <SkipForward className="relative z-10 h-8 w-8 text-white" />
         </button>
       </div>

diff --git a/apps/web/app/components/ui/CategoryChip.tsx b/apps/web/app/components/ui/CategoryChip.tsx
@@ -22,7 +22,7 @@ export const CategoryChip = ({
       className={cn("flex max-w-fit items-center gap-2 rounded-lg bg-white px-2 py-1", className)}
     >
       <Dot size={8} strokeWidth={4} className={dotClasses} absoluteStrokeWidth />
-      <div className="text-primary-950 truncate text-xs">{category}</div>
+      <div className="truncate text-xs text-primary-950">{category}</div>
     </div>
   );
 };
diff --git a/apps/web/app/components/ui/accordion.tsx b/apps/web/app/components/ui/accordion.tsx
@@ -40,7 +40,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn(className)}>{children}</div>

diff --git a/apps/web/app/components/ui/alert-dialog.tsx b/apps/web/app/components/ui/alert-dialog.tsx
@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+      "bg-black/80 fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-background 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className,
       )}
       {...props}
@@ -74,7 +74,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ));

diff --git a/apps/web/app/components/ui/avatar.tsx b/apps/web/app/components/ui/avatar.tsx
@@ -34,7 +34,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "bg-muted flex h-full w-full items-center justify-center rounded-full",
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
       className,
     )}
     {...props}

diff --git a/apps/web/app/components/ui/breadcrumb.tsx b/apps/web/app/components/ui/breadcrumb.tsx
@@ -17,7 +17,7 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
     <ol
       ref={ref}
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center break-words text-xs font-medium leading-5 sm:gap-1",
+        "flex flex-wrap items-center break-words text-xs font-medium leading-5 text-muted-foreground sm:gap-1",
         className,
       )}
       {...props}
@@ -44,7 +44,7 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cn("hover:text-foreground transition-colors", className)}
+      className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
   );
@@ -58,7 +58,7 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWit
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("text-foreground font-normal", className)}
+      className={cn("font-normal text-foreground", className)}
       {...props}
     />
   ),

diff --git a/apps/web/app/components/ui/card.tsx b/apps/web/app/components/ui/card.tsx
@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
+      className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
       {...props}
     />
   ),
@@ -37,7 +37,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
 ));
 CardDescription.displayName = "CardDescription";
 

diff --git a/apps/web/app/components/ui/chart.tsx b/apps/web/app/components/ui/chart.tsx
@@ -48,7 +48,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className,
         )}
         {...props}
@@ -159,7 +159,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+          "border-border/50 grid min-w-[8rem] items-start gap-1.5 rounded-lg border bg-background px-2.5 py-1.5 text-xs shadow-xl",
           className,
         )}
       >
@@ -174,7 +174,7 @@ const ChartTooltipContent = React.forwardRef<
               <div
                 key={item.dataKey}
                 className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                   indicator === "dot" && "items-center",
                 )}
               >
@@ -219,7 +219,7 @@ const ChartTooltipContent = React.forwardRef<
                         </span>
                       </div>
                       {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
+                        <span className="font-mono font-medium tabular-nums text-foreground">
                           {item.value.toLocaleString()}
                         </span>
                       )}
@@ -269,7 +269,7 @@ const ChartLegendContent = React.forwardRef<
           <div
             key={item.value}
             className={cn(
-              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
             )}
           >
             {itemConfig?.icon && !hideIcon ? (