EsLint v9 (#154)

* Upgrade ESLint and related configurations to version 9

- Update ESLint to version 9.19.0
- Migrate ESLint configurations to flat config format
- Remove deprecated ESLint config files
- Update package dependencies and configurations
- Simplify ESLint setup across packages
- Remove unnecessary ESLint config blocks from package.json files
- Improved CI caching with Turborepo tasks
- Removed duplicate styles

packages/ui/src/makerkit/cookie-banner.tsx

@@ -32,7 +32,7 @@ export function CookieBanner() {
     <DialogPrimitive.Root open modal={false}>
       <DialogPrimitive.Content
         onOpenAutoFocus={(e) => e.preventDefault()}
-        className={`dark:shadow-primary-500/40 fixed bottom-0 w-full max-w-lg border bg-background p-6 shadow-2xl delay-1000 duration-1000 animate-in fade-in zoom-in-95 slide-in-from-bottom-16 fill-mode-both lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`}
+        className={`dark:shadow-primary-500/40 bg-background animate-in fade-in zoom-in-95 slide-in-from-bottom-16 fill-mode-both fixed bottom-0 w-full max-w-lg border p-6 shadow-2xl delay-1000 duration-1000 lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`}
       >
         <div className={'flex flex-col space-y-4'}>
           <div>

packages/ui/src/makerkit/global-loader.tsx

@@ -23,7 +23,7 @@ export function GlobalLoader({
       <If condition={displaySpinner}>
         <div
           className={
-            'zoom-in-80 flex flex-1 flex-col items-center justify-center duration-500 animate-in fade-in slide-in-from-bottom-12'
+            'zoom-in-80 animate-in fade-in slide-in-from-bottom-12 flex flex-1 flex-col items-center justify-center duration-500'
           }
         >
           <LoadingOverlay displayLogo={displayLogo} fullPage={fullPage} />

packages/ui/src/makerkit/image-uploader.tsx

@@ -71,7 +71,7 @@ export function ImageUploader(
 
   return (
     <div className={'flex items-center space-x-4'}>
-      <label className={'relative h-20 w-20 animate-in fade-in zoom-in-50'}>
+      <label className={'animate-in fade-in zoom-in-50 relative h-20 w-20'}>
         <Image fill className={'h-20 w-20 rounded-full'} src={image} alt={''} />
 
         <Input />
@@ -95,10 +95,10 @@ function FallbackImage(
     <div className={'flex items-center space-x-4'}>
       <label
         className={
-          'relative flex h-20 w-20 cursor-pointer flex-col items-center justify-center rounded-full border border-border animate-in fade-in zoom-in-50 hover:border-primary'
+          'border-border animate-in fade-in zoom-in-50 hover:border-primary relative flex h-20 w-20 cursor-pointer flex-col items-center justify-center rounded-full border'
         }
       >
-        <ImageIcon className={'h-8 text-primary'} />
+        <ImageIcon className={'text-primary h-8'} />
 
         {props.children}
       </label>

packages/ui/src/makerkit/marketing/coming-soon.tsx

@@ -19,7 +19,7 @@ const ComingSoonText: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
   ...props
 }) => (
   <GradientSecondaryText
-    className={cn('text-lg text-muted-foreground md:text-xl', className)}
+    className={cn('text-muted-foreground text-lg md:text-xl', className)}
     {...props}
   />
 );
@@ -95,7 +95,7 @@ ComingSoon.displayName = 'ComingSoon';
 const ComingSoonLogo: React.FC<React.HTMLAttributes<HTMLImageElement>> = ({
   className,
   ...props
-}) => <div className={cn(className, 'fixed left-8 top-8')} {...props} />;
+}) => <div className={cn(className, 'fixed top-8 left-8')} {...props} />;
 ComingSoonLogo.displayName = 'ComingSoonLogo';
 
 export {

packages/ui/src/makerkit/marketing/cta-button.tsx

@@ -9,7 +9,7 @@ export const CtaButton: React.FC<React.ComponentProps<typeof Button>> =
           'h-12 rounded-xl px-4 text-base font-semibold',
           className,
           {
-            ['transition-all hover:shadow-2xl dark:shadow-primary/30']:
+            ['dark:shadow-primary/30 transition-all hover:shadow-2xl']:
               props.variant === 'default' || !props.variant,
           },
         )}

packages/ui/src/makerkit/marketing/secondary-hero.tsx

@@ -31,7 +31,7 @@ export const SecondaryHero: React.FC<SecondaryHeroProps> =
             {heading}
           </Heading>
 
-          <h3 className="font-sans text-xl font-normal tracking-tight text-muted-foreground">
+          <h3 className="text-muted-foreground font-sans text-xl font-normal tracking-tight">
             {subheading}
           </h3>
         </div>

packages/ui/src/makerkit/page.tsx

@@ -175,7 +175,10 @@ export function PageHeader({
 
           <If condition={description}>
             <If condition={displaySidebarTrigger}>
-              <Separator orientation="vertical" className="h-4 w-px hidden lg:block" />
+              <Separator
+                orientation="vertical"
+                className="hidden h-4 w-px lg:block"
+              />
             </If>
 
             <PageDescription>{description}</PageDescription>

packages/ui/src/makerkit/profile-avatar.tsx

@@ -27,7 +27,7 @@ export function ProfileAvatar(props: ProfileAvatarProps) {
         <AvatarFallback
           className={cn(
             props.fallbackClassName,
-            'uppercase animate-in fade-in',
+            'animate-in fade-in uppercase',
           )}
         >
           {props.text.slice(0, 1)}

packages/ui/src/makerkit/spinner.tsx

@@ -10,7 +10,7 @@ export function Spinner(
       <svg
         aria-hidden="true"
         className={cn(
-          `h-8 w-8 animate-spin fill-primary-foreground text-primary dark:fill-primary dark:text-primary/30`,
+          `fill-primary-foreground text-primary dark:fill-primary dark:text-primary/30 h-8 w-8 animate-spin`,
           props.className,
         )}
         viewBox="0 0 100 101"