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
2025-02-07 10:38:29 +07:00
parent e2f45cae49
commit 6f9cf22fa8
113 changed files with 1040 additions and 1284 deletions
--- a/packages/ui/src/makerkit/cookie-banner.tsx
+++ b/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>
--- a/packages/ui/src/makerkit/global-loader.tsx
+++ b/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} />
--- a/packages/ui/src/makerkit/image-uploader.tsx
+++ b/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>
--- a/packages/ui/src/makerkit/marketing/coming-soon.tsx
+++ b/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 {
--- a/packages/ui/src/makerkit/marketing/cta-button.tsx
+++ b/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,
          },
        )}
--- a/packages/ui/src/makerkit/marketing/secondary-hero.tsx
+++ b/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>
--- a/packages/ui/src/makerkit/page.tsx
+++ b/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>
--- a/packages/ui/src/makerkit/profile-avatar.tsx
+++ b/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)}
--- a/packages/ui/src/makerkit/spinner.tsx
+++ b/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"
--- a/packages/ui/src/shadcn/accordion.tsx
+++ b/packages/ui/src/shadcn/accordion.tsx
@@ -28,7 +28,7 @@ const AccordionTrigger: React.FC<
      {...props}
    >
      {children}
-      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDownIcon className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
 );
@@ -38,10 +38,10 @@ const AccordionContent: React.FC<
  React.ComponentPropsWithRef<typeof AccordionPrimitive.Content>
 > = ({ className, children, ...props }) => (
  <AccordionPrimitive.Content
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
    {...props}
  >
-    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+    <div className={cn('pt-0 pb-4', className)}>{children}</div>
  </AccordionPrimitive.Content>
 );
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
--- a/packages/ui/src/shadcn/avatar.tsx
+++ b/packages/ui/src/shadcn/avatar.tsx
@@ -34,7 +34,7 @@ const AvatarFallback: React.FC<
 > = ({ className, ...props }) => (
  <AvatarPrimitive.Fallback
    className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      'bg-muted flex h-full w-full items-center justify-center rounded-full',
      className,
    )}
    {...props}
--- a/packages/ui/src/shadcn/breadcrumb.tsx
+++ b/packages/ui/src/shadcn/breadcrumb.tsx
@@ -18,7 +18,7 @@ const BreadcrumbList: React.FC<React.ComponentPropsWithRef<'ol'>> = ({
 }) => (
  <ol
    className={cn(
-      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground',
+      'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words',
      className,
    )}
    {...props}
@@ -64,7 +64,7 @@ const BreadcrumbPage: React.FC<React.ComponentPropsWithoutRef<'span'>> = ({
    role="link"
    aria-disabled="true"
    aria-current="page"
-    className={cn('font-normal text-foreground', className)}
+    className={cn('text-foreground font-normal', className)}
    {...props}
  />
 );
--- a/packages/ui/src/shadcn/card.tsx
+++ b/packages/ui/src/shadcn/card.tsx
@@ -7,7 +7,7 @@ const Card: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
  ...props
 }) => (
  <div
-    className={cn('rounded-xl border bg-card text-card-foreground', className)}
+    className={cn('bg-card text-card-foreground rounded-xl border', className)}
    {...props}
  />
 );
@@ -26,7 +26,7 @@ const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
  ...props
 }) => (
  <h3
-    className={cn('font-semibold leading-none tracking-tight', className)}
+    className={cn('leading-none font-semibold tracking-tight', className)}
    {...props}
  />
 );
@@ -36,7 +36,7 @@ const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
  className,
  ...props
 }) => (
-  <p className={cn('text-sm text-muted-foreground', className)} {...props} />
+  <p className={cn('text-muted-foreground text-sm', className)} {...props} />
 );
 CardDescription.displayName = 'CardDescription';

--- a/packages/ui/src/shadcn/chart.tsx
+++ b/packages/ui/src/shadcn/chart.tsx
@@ -166,8 +166,7 @@ const ChartTooltipContent: React.FC<
    labelKey,
  ]);

-  /* @ts-expect-error: TS issue */
-  if (!active ?? !payload?.length) {
+  if (!active || !payload?.length) {
    return null;
  }

@@ -286,7 +285,6 @@ const ChartLegendContent: React.FC<
      )}
    >
      {payload.map((item) => {
-        /* eslint-disable @typescript-eslint/restrict-template-expressions */
        const key = `${nameKey ?? item.dataKey ?? 'value'}`;
        const itemConfig = getPayloadConfigFromPayload(config, item, key);

--- a/packages/ui/src/shadcn/command.tsx
+++ b/packages/ui/src/shadcn/command.tsx
@@ -39,7 +39,6 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 const CommandInput: React.FC<
  React.ComponentPropsWithRef<typeof CommandPrimitive.Input>
 > = ({ className, ...props }) => (
-  // eslint-disable-next-line react/no-unknown-property
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
--- a/packages/ui/src/shadcn/heading.tsx
+++ b/packages/ui/src/shadcn/heading.tsx
@@ -12,7 +12,7 @@ export function Heading({
      return (
        <h1
          className={cn(
-            `scroll-m-20 font-heading text-3xl font-bold tracking-tight dark:text-white lg:text-4xl`,
+            `font-heading scroll-m-20 text-3xl font-bold tracking-tight lg:text-4xl dark:text-white`,
            className,
          )}
        >
@@ -23,7 +23,7 @@ export function Heading({
      return (
        <h2
          className={cn(
-            `scroll-m-20 pb-2 font-heading text-2xl font-semibold tracking-tight transition-colors first:mt-0 lg:text-3xl`,
+            `font-heading scroll-m-20 pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0 lg:text-3xl`,
            className,
          )}
        >
@@ -34,7 +34,7 @@ export function Heading({
      return (
        <h3
          className={cn(
-            'scroll-m-20 font-heading text-xl font-semibold tracking-tight lg:text-2xl',
+            'font-heading scroll-m-20 text-xl font-semibold tracking-tight lg:text-2xl',
            className,
          )}
        >
@@ -45,7 +45,7 @@ export function Heading({
      return (
        <h4
          className={cn(
-            'scroll-m-20 font-heading text-lg font-semibold tracking-tight lg:text-xl',
+            'font-heading scroll-m-20 text-lg font-semibold tracking-tight lg:text-xl',
            className,
          )}
        >
@@ -56,7 +56,7 @@ export function Heading({
      return (
        <h5
          className={cn(
-            'scroll-m-20 font-heading text-base font-medium lg:text-lg',
+            'font-heading scroll-m-20 text-base font-medium lg:text-lg',
            className,
          )}
        >
@@ -67,7 +67,7 @@ export function Heading({
      return (
        <h6
          className={cn(
-            'scroll-m-20 font-heading text-base font-medium',
+            'font-heading scroll-m-20 text-base font-medium',
            className,
          )}
        >
--- a/packages/ui/src/shadcn/label.tsx
+++ b/packages/ui/src/shadcn/label.tsx
@@ -8,7 +8,7 @@ import { type VariantProps, cva } from 'class-variance-authority';
 import { cn } from '../lib/utils';

 const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 );

 const Label: React.FC<
--- a/packages/ui/src/shadcn/progress.tsx
+++ b/packages/ui/src/shadcn/progress.tsx
@@ -11,13 +11,13 @@ const Progress: React.FC<
 > = ({ className, value, ...props }) => (
  <ProgressPrimitive.Root
    className={cn(
-      'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+      'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
      className,
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="bg-primary h-full w-full flex-1 transition-all"
      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
    />
  </ProgressPrimitive.Root>
--- a/packages/ui/src/shadcn/scroll-area.tsx
+++ b/packages/ui/src/shadcn/scroll-area.tsx
@@ -28,7 +28,7 @@ const ScrollBar: React.FC<
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    orientation={orientation}
    className={cn(
-      'flex touch-none select-none transition-colors',
+      'flex touch-none transition-colors select-none',
      orientation === 'vertical' &&
        'h-full w-2.5 border-l border-l-transparent p-[1px]',
      orientation === 'horizontal' &&
@@ -37,7 +37,7 @@ const ScrollBar: React.FC<
    )}
    {...props}
  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
 );
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
--- a/packages/ui/src/shadcn/separator.tsx
+++ b/packages/ui/src/shadcn/separator.tsx
@@ -18,7 +18,7 @@ const Separator: React.FC<
    decorative={decorative}
    orientation={orientation}
    className={cn(
-      'shrink-0 bg-border',
+      'bg-border shrink-0',
      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
      className,
    )}
--- a/packages/ui/src/shadcn/skeleton.tsx
+++ b/packages/ui/src/shadcn/skeleton.tsx
@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
-      className={cn('animate-pulse rounded-md bg-primary/10', className)}
+      className={cn('bg-primary/10 animate-pulse rounded-md', className)}
      {...props}
    />
  );
--- a/packages/ui/src/shadcn/tooltip.tsx
+++ b/packages/ui/src/shadcn/tooltip.tsx
@@ -18,7 +18,7 @@ const TooltipContent: React.FC<
  <TooltipPrimitive.Content
    sideOffset={sideOffset}
    className={cn(
-      'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs',
      className,
    )}
    {...props}